Question

所以这就是我在反应原生中映射数组时想要实现的目标：

<View>
<Image resizeMode='contain' style={[styles.myImage]} source={{uri: movie.image}} />
<Image resizeMode='contain' style={[styles.myImage]} source={{uri: movie.image}} />
</View>

目前我的数组地图是这样的：

{this.state.titles.map(movie => (
<Image resizeMode='contain' style={[styles.myImage]} source={{uri: movie.image}} />
))}

如何在数组中的2的倍数之后使用模数在打开/关闭视图中添加？

Answer 1

要将每两个Images连续放置，我建议您使用FlatList组件。 FlatList是执行此操作的最佳方式，react-native建议这样做（请查看here）。您可以非常简单地使用它，并且可以阅读其完整文档here。通过使用numColumns={2}道具，您可以定义每行中的项目数。您使用FlatList的代码将是这样的：

  _keyExtractor = (item, index) => index;

  _renderItem = ({item: movie}) => (
    <Image resizeMode='contain' style={[styles.myImage]} source={{uri: movie.image}} />
  );

  render() {
    return (
      <FlatList
        data={this.state.titles}
        numColumns={2}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

react-native数组映射模

1 个答案: