javascript - 如何用两个数组渲染 FlatList？

Question

我想渲染 FlatList有两个数组 name和photo 。希望我的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 />怎么做？

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

渲染() { 常量{ 电影 Actor Cn、电影 Actor 照片 } = this.state.movi​​es;

//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>
    );

Answer 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://...' } ]