在 TabNavigator 中渲染 FlatList

时间:2021-03-23 17:56:02

标签: react-native react-native-flatlist

我已关注此 example 并尝试将 FlatList 放入其中一个选项卡中,但无法显示。

所以,这是我对代码的修改:

..
    const datos=[{"codoc": 1}, {"codoc": 2}, {"codoc": 3}];
    function HomeScreen() {
      return (
          <FlatList
            data={datos}
            renderItem={(item)=>{return <View style={{flex:1}}><Text>{item.codoc}</Text></View>}}
            keyExtractor={item=>item.codoc.toString()}
          />
      );
    }
.
.
.

我会感谢任何帮助..

1 个答案:

答案 0 :(得分:1)

您需要在 renderItem 中执行 item.item.codoc

post中的更多信息

编辑

我使用此代码。

const Tab = createBottomTabNavigator();
 
const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Test} />
      <Tab.Screen name="Settings" component={Test} />
    </Tab.Navigator>
  );
};

const datos=[
    { "codoc": 4 },
    { "codoc": 2 },
    { "codoc": 3 }
];

function Test() {


    return (
            <FlatList
            data={datos}
            renderItem={(item)=>{
                return (
                <View style={{flex:1}}>
                    <Text>{item.item.codoc}</Text>
                </View>)
            }}
            keyExtractor={item=>item.codoc.toString()}
          />
    );
}

筛选结果

Result