Question

我正在尝试使用反馈原生中的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
    }
})

Image

react-native中的ListView不呈现所有项目

0 个答案: