组件在反应本机中未在平面列表中返回

Question

试图有条件地返回平面列表中的项目，但它没有在 react native 中返回任何内容。提前致谢

<FlatList
              data={posts}
              ref={(c) => {this.flatList = c;}}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({item}) => {
                  item.categories_name.map(category=>{
                    let cat = category.toLowerCase();
                    if(cat=='movie'){
                      <Text style={{fontSize:20,color:'white'}}>This is movie</Text>
                    }
                    else(
                       <Text style={{fontSize:20,color:'white'}}>This is normal post</Text>
                      )
                    }
                  })
                  //<PostItem onImagePress={()=>this.toggleModal(item.id)} route={this.state.route_name} post={item}/>
                }
              }
              />

Answer 1

你能把你的代码重新排列成下面吗？

<FlatList
          data={posts}
          ref={c => {
            this.flatList = c;
          }}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => {
            let views = [];
            item.categories_name.map(category => {
              let cat = category.toLowerCase();
              if (cat == "movie") {
                views.push(
                  <Text style={{ fontSize: 20, color: "white" }}>
                    This is movie
                  </Text>
                );
              } else {
                views.push(
                  <Text style={{ fontSize: 20, color: "white" }}>
                    This is normal post
                  </Text>
                );
              }
            });
            return views;
            //<PostItem onImagePress={()=>this.toggleModal(item.id)} route={this.state.route_name} post={item}/>
          }}
        />

Answer 2

使用 renderItem 时需要返回 JSX 元素。

当你看到renderItem={({item}) => <Text>{item.key}</Text>}.它是以下各项的简写：

renderItem={({item}) => {
    return <Text>{item.key}</Text>
}}

所以像下面这样的东西应该有效：

<FlatList
  data={posts}
  ref={(c) => {this.flatList = c;}}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) => {
    return item.categories_name.map(category=>{
      let cat = category.toLowerCase();
      if(cat=='movie'){
        return <Text style={{fontSize:20,color:'white'}}>This is movie</Text>
      } else {
        return <Text style={{fontSize:20,color:'white'}}>This is normal post</Text>
      }
    })
    ...

您应该注意到上面 renderItem returns .map返回的任何内容(应该是 JSX 元素的数组。.map fn 中的这个return也是必要的：return <Text style...因为这是你想使用 .map 的方式，*你想返回元素数组* 如果不是很清楚，请检查.map并自己弄清楚。这应该会更好地帮助您

我希望这有帮助