Компоненты не возвращаются в плоский список в реагировать на нативные - PullRequest
Новая
       27

Компоненты не возвращаются в плоский список в реагировать на нативные

1 голос
/ 03 апреля 2019

Пытался условно вернуть элементы в плоский список, но ничего не возвращает в реагирующем нативе.Заранее спасибо 

<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}/>
                }
              }
              />

Ответы [ 2 ]

2 голосов
/ 03 апреля 2019

Можете ли вы перестроить свой код на следующий? 

<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}/>
          }}
        />
0 голосов
/ 03 апреля 2019

Вам необходимо вернуть элементы JSX при использовании renderItem.

когда вы видите 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. Этот return внутри .map fn также необходим: return <Text style..., потому что вы так хотите чтобы использовать .map, * вы хотите вернуть массив элементов * Если это не так понятно, пожалуйста, отметьте .map и выясните это самостоятельно. Это должно помочь вам лучше

Надеюсь, это поможет

...