Question

试图有条件地返回一个平面列表中的项目，但是它没有返回任何本机响应。预先感谢

<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元素的数组。.mapfn中的return也是必须的：{{ 1}}，因为这就是您要使用return <Text style...的方式，*您要返回元素数组*如果不清楚，请检查.map并自己弄清楚，这对您有帮助更好

我希望这对您有帮助

在React Native中组件没有返回到平面列表中

2 个答案: