如何用两个数组渲染 FlatList？答案

【问题标题】：How to render FlatList with two array?如何用两个数组渲染 FlatList？
【发布时间】：2018-05-12 03:20:08
【问题描述】：

我想用name 和photo 两个数组来渲染FlatList。我希望我的FlatList 每件商品都包含姓名和照片。

但我不知道如何将它们合并到我的FlatList 数据中。

console.log 我的movieActorCn 数组如下：

["A", "B", "C", "D", "E"]

movieActorPhoto 数组如下：

["https://movies.yahoo.com.tw/x/r/w290/i/o/productio…names/June2017/DL56QvvLdISH9D3U1dOR-6144x4096.jpg", "/build/images/noavatar.jpg", "https://movies.yahoo.com.tw/x/r/h290/i/o/production/names/April2018/dPWzXuXupOAHs2ZW2jdk-408x590.jpg", "https://movies.yahoo.com.tw/x/r/w290/i/o/production/names/April2018/123akbim6D7wsxqnoJJ0-400x266.jpg", "https://movies.yahoo.com.tw/x/r/w290/i/o/productio…names/June2017/DL56QvvLdISH9D3U1dOR-6144x4096.jpg"]

我尝试使用 Array.prototype.push.apply(movieActorCn, movieActorPhoto); 和 cosole.log(movieActorCn); 合并它们，并找到从 5 到 10 的数组。如果我想渲染每个项目包括一个名称和一张照片，则无法使用它。

我希望我的renderActor 函数可以渲染姓名和照片。喜欢用<Image />和<Text />渲染怎么办？

任何帮助将不胜感激。提前致谢。

渲染（）{ 常量 { movieActorCn, movieActorPhoto } = this.state.movies;

//It just caange from 5 to 10
Array.prototype.push.apply(movieActorCn, movieActorPhoto);
console.log(movieActorCn);

return (
        <FlatList
          data={movieActorPhoto}
          renderItem={this.renderActor}
          horizontal={true}
          keyExtractor={(item, index) => index.toString()}  
        />

);

}

renderActor({ item }) {
    console.log('renderActor');
    console.log(item);
    return (
      <View
        style={{     
          alignSelf: 'stretch',
          backgroundColor: '#fff',
          borderRadius: 5,
          borderWidth: 1,
          borderColor: '#fff',
          marginLeft: 10,
          marginRight: 10 
        }}
      >
      <Image 
        source={{uri: item }} 
        style={{height: 120, width: equalWidth, resizeMode: 'stretch', flex: 1}}
      />
      </View>
    );

【问题讨论】：

标签： javascript arrays react-native logic react-native-flatlist

【解决方案1】：

试试这个：

<FlatList
  data={movieActorPhoto}
  extraData={movieActorCn /* so that list is re-rendered when `movieActorCn` changes */}
  keyExtractor={item => item}
  renderItem={({ item, index }) => (
    <View>
      <Image source={{ uri: item }} />
      <Text>{movieActorCn[index]}</Text>
    </View>
  )}
/>

最好将数据结构更改为

[ { name: 'A', photo: 'https://...' } ]

【讨论】：

【解决方案2】：

只需将您的数组推入一个数组即可：

   let a=[];
   let b=[];
   let c=[];

   c.push(...a);
   c.push(...b);

【讨论】：