React-native:FlatList基本使用

<FlatList style={{width: ScreenWidth}}
                          ListFooterComponent={
                              //在底部的view，对应有ListHeaderComponent
                              //在列表顶部和尾部需要显示额外信息时候使用
                              ()=>{
                                  return !this.state.FlatListIsLoding?
                                      <TouchableOpacity
                                          style={{backgroundColor:'white',width:ScreenWidth,height:0.1*ScreenHeight,justifyContent:'center',
                                              alignItems:'center'
                                          }}
                                          onPress={()=>{
                                              this.setState((prevState) => ({FlatListIsLoding: true}));
                                              setTimeout(()=>{
                                                  this.setState((prevState) => ({FlatListIsLoding: false}));
                                              },3000)
                                          }}
                                      >
                                          <Text>点击加载更多</Text>
                                      </TouchableOpacity>

                                      :  <ActivityIndicator style={{backgroundColor:'white',width:ScreenWidth,height:0.1*ScreenHeight}} size="large" color="#ff0000"/>;
                              }
                          }
                          ItemSeparatorComponent={
                              () => {
                                  return <View style={{backgroundColor: 'white', width: ScreenWidth, height: 8}}/>;
                              }

                          }
                          refreshing={this.state.FlatListIsRefreshing}
                          onRefresh={()=>{
                              //刷新的方法
                              this.setState((prevState) => ({FlatListIsRefreshing: true}));
                              setTimeout(()=>{
                                  this.setState((prevState) => ({FlatListIsRefreshing: false}));
                              },3000)
                          }}
                          ListEmptyComponent={
                              <View style={{
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                  width: ScreenWidth,
                                  height: 0.8 * ScreenHeight
                              }}>
                                  <Text>空空如也</Text>
                              </View>}
                          data={this.props.hadAddedGoods}
                          renderItem={({item}) => (
                              <View style={{
                                  backgroundColor: item.type == 0 ? 'gray' : '#005AB5',
                                  width: ScreenWidth,
                                  height: 0.13 * ScreenHeight
                              }}>
                                  <Text
                                      style={{fontSize: 17, marginTop: 20, marginLeft: 10}}
                                  >{item.name}</Text>

                                  <TouchableOpacity style={{
                                      paddingTop: 5,
                                      paddingBottom: 5,
                                      paddingLeft: 10,
                                      paddingRight: 10,
                                      borderRadius: 5,
                                      backgroundColor: 'red',
                                      position: 'absolute',
                                      justifyContent: 'center',
                                      alignItems: 'center',
                                      bottom: 10, right: 10
                                  }} onPress={() => {
                                      Alert.alert(
                                          '警告',
                                          '确认删除吗',
                                          [
                                              {text: '取消', onPress: () => console.log('Ask me later pressed'), style: 'cancel'},
                                              {text: '确定', onPress: () => {
                                                      this.props.deleteGoods(item);
                                                  }},
                                          ],
                                          { cancelable: false }
                                      )

                                  }}>
                                      <Text style={{color: 'black'}}>点击删除</Text>
                                  </TouchableOpacity>
                              </View>

                          )}
                >
                </FlatList>