React Native Flatlist不能一次渲染20个项目

时间:2018-07-22 09:33:08

标签: android json react-native react-native-flatlist

我有20个Json数据集,这些数据集是使用fetch方法获得的,并在平面列表中显示。

我的问题是,当我加载该数据并滚动到列表末尾时,它仅滚动到第13个数据。 7个数据将不会显示。我的平面列表不滚动数据集的结尾

我附上我的屏幕截图和源代码。如果有人可以帮助我解决这个问题。对我有很大帮助谢谢

有没有限制的平面列表呈现?

enter image description here

class CategoryList extends Component{
  constructor(props) {
    super(props);
  this.state={

    info: [],
    isLoading: true

  };
}
  static navigationOptions = {
    header: {
      visible: false,
    }
  }




  handlePress = async () => {
    fetch('http://209.97.172.234/index.php/testCV/jobCatogoryList', {
        method: 'POST',headers: {
          'Content-Type': 'application/json',
        }
       
       
  })
      .then((response) => response.json())
      .then((responseJson) => {

    

       this.setState({ info: responseJson.data});

      })
      .catch((error) => {
        console.error(error);
      });
  }

  componentDidMount(){
    this.handlePress();
  }

  
    render() {

 const { info } = this.state;
      return (
<View>
        <Header>
          <TouchableHighlight onPress={() => this.props.navigation.toggleDrawer()} >
            <MyCustomLeftComponent />
          </TouchableHighlight>

          <MyCustomCenterComponent name='Category' />


          <MyCustomRightComponent />

        </Header>
<Card containerStyle={[styles.cardContainer]} >




<SearchBar
  lightTheme
  placeholder='Type Here...' />

<View>

 <FlatList
        data={info.cList}
        renderItem={({ item }) => (
          <ListItem
            
        title={item.cName}
        badge={{ value: item.cCount, textStyle: { color: 'orange' }}}
          />
        )}
      />

 </View>





    </Card>

    </View>
      );
    }
  }

0 个答案:

没有答案