在 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>

    );

  }

}