如何用两个数组渲染 FlatList？

Question

我想用 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); I 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>
    );

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

Answer 2

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

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

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

如何用两个数组渲染 FlatList？

How to render FlatList with two array?

javascript

arrays

logic

react-native

react-native-flatlist