React Native 上的类似 Bootstrap 的 col-row-grid 功能？答案

【问题标题】：Bootstrap-like col-row-grid functionality on React Native?React Native 上的类似 Bootstrap 的 col-row-grid 功能？
【发布时间】：2017-08-17 22:27:19
【问题描述】：

如果我用图片演示会更好。

这就是我想要达到的目标。假设横向模式平板电脑大小。假设我在数组中有 X 个元素。我想将它映射到整个行，直到它连续有 3 个项目，然后下降。使用引导程序，我可以执行 3 次 col-md-4 之类的操作。

目前我正在使用native-base。它有一个有趣的grid systems，但不是我想要的。

这就是我现在拥有的：

<Grid>
  <Row>
    { recipeStore.categories.map((category, index) => {
      return (
        <Col key={index} style={{height: 300}}>
          <Card>
            <CardItem>
              <Body>
                <Text>{ category.name }</Text>
              </Body>
            </CardItem>
          </Card>
        </Col>
      )
    })}
  </Row>
</Grid>

如何让数组迭代填充 3 列然后转到下一行？

【问题讨论】：

标签： layout react-native grid

【解决方案1】：

您可以在父控件上使用flexWrap: 'wrap'，然后在子控件上使用flexBasis。

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';

const ABox = () => <View style={styles.box} />;

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ABox />
        <ABox />
        <ABox />
        <ABox />
        <ABox />
        <ABox />
        <ABox />
        <ABox />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    paddingTop: 20,
  },
  box: {
    flexBasis: 75,
    borderWidth: 1,
    borderColor: 'black',
    height: 40,
    margin: 10,
  }
});

小吃：https://snack.expo.io/HkUFUp7ub

【讨论】：

【解决方案2】：

最好的方法是使用FlatList，它性能好且易于使用。并且建议制作一个列表（参见this）。此外，您不需要向您的项目添加任何额外的包。您可以轻松使用FlatList，如下所示：

 _keyExtractor = (item, index) => index; 

  _renderItem = ({item: category}) => (
    <Card>
        <CardItem>
          <Body>
            <Text>{ category.name }</Text>
          </Body>
        </CardItem>
      </Card>
  );

  render() {
    return (
      <FlatList
        numColumns={3}
        data={recipeStore.categories}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

注意：您应该使用numColumns 属性来定义每行中的项目数。您可以在here 中查看FlatList 的文档。

【讨论】：

这并没有回答问题，OP 是在询问他们如何向他们的应用程序添加响应式布局，这只是描述了如何制作列表。