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参数等于2的numColumns组件。检查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>
    );
  }
}

在React Native中彼此相邻显示数据

1 个答案: