在本机反应中彼此相邻显示数据

Question

在我的 react-native 应用程序中，我从 api 返回数据，一切正常，除了我的布局搞砸了，我有一个专辑列表，我需要将每 2 个专辑彼此相邻显示，但所有它们中的每一个都显示在彼此下方，这是我的代码：

专辑详情：

   const AlbumDetails= (props) => {
    return(
      <Album>
        <Image source={{ uri: props.album.thumbnail_image }}/>
        <Text>{props.album.title}</Text>
      </Album>
    );
};

export default AlbumDetails;

专辑：

const Album= (props) => {
    return(
      <View style={{flex: 1}}>
      <View style={{display: "flex", flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
      <View style={styles.albumContainer}>
        <View>{props.children}</View>
      </View>
      </View>
      </View>
    );
};

    const styles = StyleSheet.create({
      albumContainer: {
        backgroundColor: 'red',
        width: '50%',
        height: 180,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 20,
        flexDirection: 'column'
      },
      });

export default Album;

Answer 1

我建议使用FlatList 组件和numColumns 参数等于2。检查Expo Snack 或下面的代码。

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={{ margin: 5 }}
          data={data}
          numColumns={2}
          keyExtractor={(item, index) => item.id}
          renderItem={dataItem => (
            <AlbumDetails
                album={{
                  title: dataItem.item.title,
                  thumbnail_image: dataItem.item.image,
                }}
            />
          )}
        />        
      </View>
    );
  }
}