[英]React Native BottomTabNavigator navigation not working
I created a BottomTabNavigator app with expose, it's my first project with react-native.我创建了一个带有公开的 BottomTabNavigator 应用程序,这是我第一个使用 react-native 的项目。 On the last tab I have a FlatList with a few elements which should open different Views outside the TabNavigation.在最后一个选项卡上,我有一个带有一些元素的 FlatList,这些元素应该在 TabNavigation 之外打开不同的视图。 But when I click on a item in the ListView, I get the following error: TypeError: undefined is not an object (evaluating 'item.navigation.navigate'. This also happens when I try to do it with props, but props also won't work properly in my project.但是当我点击 ListView 中的一个项目时,我收到以下错误:TypeError: undefined is not an object在我的项目中不能正常工作。
I'm trying to fix this for two days and I don't know any further.我试图解决这个问题两天,我不知道更多。 Can anyone please help me with this?任何人都可以帮我解决这个问题吗? In addition, has someone a good guide for navigation and props?另外,有没有很好的导航和道具指南?
App.tsx应用程序.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索引.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 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 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>
);
}
}
You are trying to access navigation which is passed to the MenuFlatList component as a prop you should do like below您正在尝试访问作为道具传递给 MenuFlatList 组件的导航,您应该像下面这样
<TouchableWithoutFeedback onPress={() => {
this.props.navigation.navigate('WebViewImprint');
}}>
Any screen component in the navigation will receive a 'navigation' props which you can use to navigate to other screens.导航中的任何屏幕组件都会收到一个“导航”道具,您可以使用它来导航到其他屏幕。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.