未显示如何修复 flatlist 反应原生

Question

我在抽屉导航器中使用列表，它包含两个列表，一个是静态的，另一个是动态的（从 api 获得的项目），但是我需要使用平面列表而不是列表（用于使用 onEndReached 实现无限滚动） ，当我使用它时，列表中的任何一个都会变为空白。

包含两个列表（静态和动态）的列表：

  return (
      <View style={{ flex:1 }}>
          <View style={{ height:80,alignItems: 'center', justifyContent: 'center' }}>
           <Image source={IMAGE.ICON_MENU} style={{ height:60,width:160 }}/>
          </View>
          <ScrollView>
          <View style={{flexDirection: 'column',flex:1,  justifyContent: 'center',alignItems: 'stretch' }}>
          <List style={{marginBottom: 30}} >
            <ListItem  style={{ marginLeft: 0, marginBottom: 6,backgroundColor: 'red' }}  onPress={() => this.props.navigation.navigate('Politik')}>
             <Icon style={{marginLeft: 20}} name={'sign-in'} size={20} color={"white"} />
             <Text style={{ marginLeft: 10,color: 'white' }} >Log in</Text>
            </ListItem>
            <ListItem  style={{ marginLeft: 0,backgroundColor: 'red' }}  onPress={() => this.props.navigation.navigate('Politik')}>
             <Icon style={{marginLeft: 20}} name={'home'} size={20} color={"white"} />
             <Text style={{marginLeft: 10,  color: 'white' }}>Top-News</Text>
            </ListItem>
          </List>
         </View>
            {DynamicList}
         </ScrollView>
       </View>
    );

动态列表：

const DynamicList=this.state.data?
(
  <View style={{}}>
  <List style={{flex:1 }}
  dataArray={this.state.data}
  keyExtractor={(item,index) => index.toString()}
renderItem={({item,index})=>{
return (
           <ListItem  style={{  marginLeft: 20,marginRight: 20}}  onPress={() => this.props.navigation.navigate('Feed',{urll:`https://nux3.tageblatt.lu/${item.feed}`}) &&this.props.navigation.closeDrawer()}>
           <Text style={{ marginLeft: 0 }}>{item.label}</Text>
           </ListItem >
        )
  }} />
    </View>
):null;

我尝试删除 ScrollView 但没有任何变化。

Answer 1

您应该将所有内容包装在FlatList 而不是ScrollView。

const DrawerContent = () => {
  const myDynamicItems = [
    // ...
  ];
  const renderItem = ({ title, iconId, onPress }) => {
    return (
      <ListItem
        style={{ marginLeft: 0, marginBottom: 6, backgroundColor: 'red' }}
        onPress={onPress}
      >
        <Icon style={{ marginLeft: 20 }} name={iconId} size={20} color={'white'} />
        <Text style={{ marginLeft: 10, color: 'white' }}>{title}</Text>
      </ListItem>
    );
  };
  const data = [
    {
      title: 'Log In',
      onPress: () => this.props.navigation.navigate('Politik'),
      iconId: 'log-in',
    },
    // other static items
    // other dynamic items
    ...myDynamicItems,
  ];
  return (
    <View style={{ flex: 1 }}>
      <View style={{ height: 80, alignItems: 'center', justifyContent: 'center' }}>
        <Image source={IMAGE.ICON_MENU} style={{ height: 60, width: 160 }} />
      </View>
      <FlatList
        renderItem={renderItem}
        data={data}
        // other props
      />
    </View>
  );
};