在 TouchableOpacity onPress 上导航到另一个屏幕答案

【问题标题】：Navigating to another screen on TouchableOpacity onPress在 TouchableOpacity onPress 上导航到另一个屏幕
【发布时间】：2021-12-21 07:49:51
【问题描述】：

我正在使用 React Native 和 React-Navigation。

在我的应用程序中，我使用来自@react-navigation/bottom-tabs 的 const Tab = createBottomTabNavigator() 作为选项卡。

我在顶部标题中也有图标。

对于顶部标题图标（不是选项卡）：

我希望当用户按下它导航到 cartStack 组件的元素时：

这是我的代码：

在 AppHeader.js 中：

import CartScreen from './Screens/CartScreen';


function AppHeader(){

    let cartStack = () =>{
        let CartStack = createNativeStackNavigator();
        return(
            <CartStack.Navigator>
                <CartStack.Screen name="CartStack" component={CartScreen} options={{headerShown: false}} />
            </CartStack.Navigator>
        );
    }
    
    
        
    let myHeaderIcons = ({navigation}) =>{
        return(
            <View style={myHeaderStyles.iconsContainerStyle}>
                <TouchableOpacity onPress={() => navigation.navigate('CartStack')>
                    Click here
                </TouchableOpacity>
            </View>
        );
    }
    
    
}


export default AppHeader;

在 App.js 中：

class App extends React.Component{
   render(){
    const Tab = createBottomTabNavigator();
    const Stack = createNativeStackNavigator();
    return(
        <NavigationContainer>
            <Tab.Navigator screenOptions={{headerRight:() => <AppHeader/>}}>
                <Tab.Screen .... />
            </Tab.Navigator>
        </NavigationContainer>
    );
   }
}

在添加此行 onPress={() => navigation.navigate('CartStack') 后出现以下错误：

TypeError: undefined is not an object (evalating '_ref.navigation')

出现这种错误的原因是什么？

【问题讨论】：

错误意味着：navigation 在您的示例中未定义。你在哪里使用myHeaderIcons？
@KevinAmiranoff 我已经更新了我的问题中的代码，我使用 AppHeader 作为应用程序的标题

标签： javascript react-native react-navigation

【解决方案1】：

该错误表示未找到对您屏幕的引用。请检查您的导航器是否在NavigationContainer 内，以便可以找到它。

如果您觉得要嵌套导航器，请注意在 right way 中导航到它们。

【讨论】：