Отображение данных рядом друг с другом в реагировать родной

Question

В моем приложении «native-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>
    );
  }
}