在本机反应中更改视图形式

Question

我正在创建一个视图，其中所有项目都显示在其他项目下，这是我的代码

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, Alert } from 'react-native';
import CheckBox from '@react-native-community/checkbox';

const TacosData = require("../JSON/TacosSauce.json")



export default class Commande extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: TacosData,
            SelectedItem: []
        };
    }
    onchecked(id) {
        const data = this.state.data
        const index = data.findIndex(x => x.id === id);
        data[index].checked = !data[index].checked
        this.setState(data)
    }
    renderTacos() {
        return this.state.data.map((item, key) => {
            return (
                <TouchableOpacity style={{  alignItems: 'center'  }} key={key} onPress={() => { this.onchecked(item.id) }}>
                    <Image style={{ width: 50, height: 50, alignSelf: 'center',  }} source={{ uri: item.image }} ></Image>
                    <Text style={{ fontSize: 18, fontStyle: 'normal', alignItems: 'center'}}>{item.key}</Text>
                    <CheckBox value={item.checked}
                        style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],  }}
                        onValueChange={() => { this.onchecked(item.id) }}
                        tintColors={{ true: '#D05A0B', false: 'black' }}

                    />
                </TouchableOpacity>
            )
        })
    }
render() {
    
return (
<View style={styles.container}>
            <Text style={styles.text_titre}>La viande</Text>
        <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
            <View style={{ alignSelf: 'center', marginTop: 25, flexDirection: 'column' }}> 
                {this.renderTacos()} 
            </View>
        </View>
    );
}
}

我有 4 个项目，每个项目在我的代码中都有文本、图像和复选框，它们是这样显示的

这是我的 JSON 代码：

[

  {
    "id": 0,
    "key":" Viande hachee",
    "checked": false,
    "image": "https://i.imgur.com/RuVD8qi.png   "

  },
  {
    "id": 1,
    "key": " Escalope pane",
    "checked": false,
    "image": "https://i.imgur.com/WNeYn6d.png"

  },
  {
    "id": 2,
    "key": " Escalope grille",
    "checked": false,
    "image": "https://i.imgur.com/iFpCySw.png"

  },
  {
    "id": 3,
    "key": "   Cordon  bleu",
    "checked": false,
    "image": "https://i.imgur.com/iRo6ivZ.png"

  }


]

我想将外观更改为此

这有什么解决办法吗？