在 react native expo 中使用 flex 将同一行的 2 张卡片与动态内容对齐

Question

我在 react native expo 项目中使用卡片，卡片是动态创建和放置的，但我希望 2 张卡片显示在同一行上。

所需代码

let data = [

{ id: "1", title: "First", desc: "Some desc", time: "4pm" },

{ id: "2", title: "Second", desc: "Some second desc", time: "5pm" },

           ];

class App extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            products: data,

        };

    }    

    render() {

        return (

            <View style={{display: "flex", flex: 1}}>

                    

                <View style={{}}>

                    <FlatList

                        data={this.state.products}

                        renderItem={({ item }) => (

                            <TouchableOpacity>

                                <Card

                                    style={{

                                        margin: 5,

                                    }}

                                >

                                    <View style={styles.checkCards}>

                                        <Text>{item.title}</Text>

                                    </View>

                                </Card>

                            </TouchableOpacity>

                        )}

                    />

                </View>

            </View>

           )}}

Answer 1

尝试给 FlatListnumColumns={2}let data = [  { id: '1', title: 'First', desc: 'Some desc', time: '4pm' },  { id: '2', title: 'Second', desc: 'Some second desc', time: '5pm' },];export default class App extends React.Component {  constructor(props) {    super(props);    this.state = {      products: data,    };  }  render() {    return (      <View style={{ display: 'flex', flex: 1, marginTop: 24 }}>        <View style={{}}>          <FlatList          numColumns={2}            data={this.state.products}            renderItem={({ item }) => (              <TouchableOpacity style={{ flex: 1, }}>                <Card                  style={{                    margin: 5,                    padding: 10,                  }}>                  <View style={{}}>                    <Text>{item.title}</Text>                  </View>                </Card>              </TouchableOpacity>            )}          />        </View>      </View>    );  }}