React-Native中的ListView无法呈现所有项目

Question

我正在尝试使用react-native中的ListView以网格格式呈现从jsonplaceholder获得的todos的所有标题。 某种程度上，代替渲染200个项目，仅渲染11个项目。 但是，当我取出flexDirection样式时，所有200个项目均以List格式而不是我想要的网格呈现。 这是代码示例

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

export default class PhotoGrid extends Component {
   constructor(props) {
   super(props);
     this.state = {
      isLoading: true
 }
}

componentDidMount() {
 return fetch('https://jsonplaceholder.typicode.com/todos')
  .then((response) => response.json())
  .then((todos) => {
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==r2});
    this.setState({
      isLoading: false,
      dataSource: ds.cloneWithRows(todos),
    }, function() {
      // do something with new state
    });
  })
  .catch((error) => {
    console.error(error);
  });
}

render() {
if (this.state.isLoading) {
  return (
    <View style={{flex: 1, paddingTop: 20}}>
      <ActivityIndicator />
    </View>
  );
}

return (
  <View style={styles.container}>
    <ListView
      contentContainerStyle={styles.list}
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text style={styles.item}>{rowData.title}
      </Text>}
    />
  </View>
     );
   }
 }

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

图片