Question

我使用Exposure创建了一个BottomTabNavigator应用程序，这是我的第一个带有react-native的项目。在最后一个选项卡上，我有一个FlatList，其中包含一些元素，这些元素应在TabNavigation之外打开不同的视图。但是，当我单击ListView中的项目时，出现以下错误：TypeError：undefined不是一个对象（正在评估“ item.navigation.navigate”。当我尝试使用道具进行操作时也会发生这种情况，但是道具也获得了成功在我的项目中无法正常工作。

我正在尝试修复此问题两天，我以后再也不知道了。谁能帮我这个忙吗？此外，有人提供导航和道具的良好指南吗？

App.tsx

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

index.tsx

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <RootNavigator />
    </NavigationContainer>
  );
}

const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Root" component={BottomTabNavigator} />
      <Stack.Screen name="WebViewImprint" component={WebViewImprint} />
      <Stack.Screen name="MenuFlatList" component={MenuFlatList} />

      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
    </Stack.Navigator>
  );
}

BottomTabNavigator.tsx

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
      { .... }
      <BottomTab.Screen
        name="TabMenu"
        component={TabMenuNavigator}
        options={{
          tabBarLabel: "Menü",
          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}

function TabBarIcon(props: { name: string; color: string }) {
  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}

const TabMenuStack = createStackNavigator<TabMenuParamList>();

function TabMenuNavigator() {
  const colorScheme = useColorScheme();

  return (
    <TabMenuStack.Navigator>
      <TabMenuStack.Screen
        name="TabMenu"
        component={TabMenu}
        options={{ 
          header: props => <StacknavigatorImage />,
          headerStyle: {
            backgroundColor: Colors[colorScheme].barBackgroundColor
          }
        }}
      />
    </TabMenuStack.Navigator>
  );
}

MenuFlatListComponent.tsx

const Item = ({ title } : {title: any}) => (
     <View style={styles.item}>
          <Text style={styles.title}>{title}</Text>
     </View>
);

export default class MenuFlatList extends React.Component {

     render(){

          return (
               <SafeAreaView style={styles.container}>
                    <FlatList style={styles.flatList}
                    data={DATA}
                    renderItem={({item} : {item: any}) => {
                         return (
                              <TouchableWithoutFeedback onPress={() => {
                                   item.navigation.navigate('WebViewImprint');
                              }}>
                                   <View style={styles.item}>
                                             <Image source={item.icon} style={styles.icon} />
                                             <Item title={item.title} />
                                   </View>
                              </TouchableWithoutFeedback>
                         );}
                         
                    }
                    keyExtractor={item => item.id}
                    />
               </SafeAreaView>
          );
     }
}

Answer 1

您正在尝试访问导航，该导航作为一种道具传递给MenuFlatList组件，您应该在下面进行操作

  <TouchableWithoutFeedback onPress={() => {
         this.props.navigation.navigate('WebViewImprint');
   }}>

导航中的任何屏幕组件都将收到一个“导航”道具，可用于导航到其他屏幕。

React Native BottomTabNavigator导航不起作用

1 个答案: