Question

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

这就是我想要实现的目标。假设横向模式平板电脑大小。假设我在数组中有X个元素。我想将它映射到整行，直到它连续有3个项目，然后下降。使用bootstrap，我可以执行三次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列然后转到下一行？

Answer 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

Answer 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 peroperty来定义每行中的项目数。您可以在here中看到FlatList的文档。

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

2 个答案: