React Native 中的 ListView 网格

Question

我正在用 React Native 构建一个简单的应用程序，它从远程 JSON 来源获取列表并将它们显示在屏幕上。

到目前为止，在这里使用出色的 example，我已经设法使用 ListView 组件按行显示结果（即每行 1 个结果，请参见屏幕截图）。我需要在网格中显示结果，即每行 3 到 6 个项目，具体取决于屏幕大小和方向。

将这些结果放入网格的最佳方法是什么？我可以为此使用 ListView 吗，还是仅针对每行一个结果？我试过使用 flexbox 样式，但是，由于 React 似乎不接受 % 值并且 ListView 不接受样式，所以我还没有取得任何成功。

Answer 1

您需要使用 flexbox 的组合，并且了解 ListView 包装 ScrollView 等具有其属性的知识。考虑到这一点，您可以使用 ScrollView 的 contentContainerStyle 属性来设置项目的样式。

var TestCmp = React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Array.apply(null, {length: 20}).map(Number.call, Number);
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

    render: function() {
      return (
        <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
      );
    }
});

只是一个带有一些虚拟数据的 ListView。注意 contentContainerStyle 的使用。这是样式对象：

var styles = StyleSheet.create({
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        backgroundColor: 'red',
        margin: 3,
        width: 100
    }
});

我们告诉容器我们想要包装行中的项目，然后我们设置每个子对象的宽度。

Answer 2

我将此添加为答案，因为溢出评论隐藏在 Colin Ramsay 的回复下：从 React Native 0.28 开始，您还需要 alignItems: 'flex-start', 在列表视图样式中，否则 flexWrap 将不起作用。感谢 codedump.io 上的 Kerumen。所以，

var styles = StyleSheet.create({
list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
},

...其余如 Colin 的回复。

Answer 3

关注 Colin Ramsay 的回答。如果你想要每个项目的一半宽度，试试这个方法。

...
import { Dimensions } from 'react-native'; 
const { width, height } = Dimensions.get('window');
const gutter = 0; // You can add gutter if you want
...


const styles = StyleSheet.create({
  item: {
    width: (width - gutter * 3)/2,
    marginBottom: gutter,
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#ff0000',
  },
  list: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingHorizontal: gutter,
  },
});

Answer 4

我有同样的问题，我写了一个组件来解决这个问题，你可以在这里找到它：https://github.com/pavlelekic/react-native-gridview

另外，这个组件做的另一件事是它确保项目的宽度是一个整数，这样项目的边框就没有抗锯齿，它们清晰明快。

Answer 5

在 react-native 中使用 FlatList 而不是 Listview。它具有更多的增值功能和更好的性能。 checkout the example here

Answer 6

ListView 现在 deprecated and you should use FlatList。 FlatList 有一个名为 numColumns 的道具，这正是我们想要创建可滚动网格的道具。

例如：

const data = [
  {id: 'a', value: 'A'},
  {id: 'b', value: 'B'},
  {id: 'c', value: 'C'},
  {id: 'd', value: 'D'},
  {id: 'e', value: 'E'},
  {id: 'f', value: 'F'},
];
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;
const styles = StyleSheet.create({
  itemContainer: {
    width: size,
    height: size,
  },
  item: {
    flex: 1,
    margin: 3,
    backgroundColor: 'lightblue',
  }
});

function Grid(props) {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => (
        <View style={styles.itemContainer}>
          <Text style={styles.item}>{item.value}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      numColumns={numColumns} />
  );
}

这篇 blog post 很好地解释了 FlatList 的新特性。

注意：由于某些原因，您必须在 FlatList 上使用 keyExtractor 而不是在每个项目上使用典型的 key 属性。否则你会得到一个警告。

Answer 7

可以使用FlatList并设置numColumns得到与grid相同的结果

Answer 8

使用 React Native 的 FlatList 组件检查以下示例，以支持无限滚动并具有出色的性能：

//Resize the grid
onLayout = (event) => { 
  const {width} = event.nativeEvent.layout;
  const itemWidth = 150
  const numColumns = Math.floor(width/itemWidth)
  this.setState({ numColumns: numColumns })
}

render() {
  return (
    <Content 
     contentContainerStyle={{flex:1, alignItems: 'center'}}
     onLayout={this.onLayout}>
       <FlatList
        data={this.state.products}
        keyExtractor={(item, index) => index}
        key={this.state.numColumns}
        numColumns={this.state.numColumns}
        renderItem={({item}) => 
          <ListThumb //Custom component, it's only an example.
           navigation={navigation}
           brand={item.brand}
           price={item.price}
           imageSource={item.image_link}/>
        }
     />
   </Content>
  )
}

例子看起来像

此致，尼科尔斯

Answer 9

ScrollView 和 contentContainerStyle prop 对我有用

        <ScrollView contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap", alignContent: "center",}}>
            {user.posts.map((post, index) => (
                <Image
                    source={require(post.uri)}
                    key={index}
                    style={{ width: 100, height: 100 }}
                />
            ))}
        </ScrollView>

React Native 中的 ListView 网格

ListView grid in React Native

listview

react-native