javascript - 在 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>
           )}}

标签： javascriptreact-nativeflexboxexpo

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>
    );
  }
}

工作示例：世博小吃

更多信息，numcolumns