如何在 React-Native 的嵌套导航器中导航到另一个屏幕？答案

【问题标题】：How to navigate to another screen in a nested navigator in React-Native?如何在 React-Native 的嵌套导航器中导航到另一个屏幕？
【发布时间】：2020-09-06 18:00:47
【问题描述】：

我刚刚实现了底部导航栏，现在看来我需要更改在屏幕之间导航的方式。这就是我之前的做法：

onPress={() => this.props.navigation.navigate('my_profile')}

但现在它不起作用，它显示此消息：

您有名为“my_profile”的屏幕吗？如果您尝试导航到嵌套导航器中的屏幕，请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigato

这就是我实现底部标签的方式：

export default function home_customers() {    
  return (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={home_customer_screen} />
            <Tab.Screen name="More" component={settings_screen} />
        </Tab.Navigator>
    </NavigationContainer>
  );
}

//this class below is located in the same file with the function home_customers
class home_customer_screen extends Component{ 
   ... 
}

//this class is located in a different file that's why I am exporting it
export default class settings_screen extends Component{ 
   render() {
    return (
        <View>                    
             <TouchableOpacity onPress={() => this.props.navigation.navigate('my_profile')}>                           
               <Text>My profile/Text>                           
             </TouchableOpacity>                             
        </View >
    );
  } 
}

//this is where I am trying to navigate to
export default class my_profile extends Component {
 ...
}

仅供参考：我使用的不是函数而是类！

更新

我正在使用嵌套导航器。这是位于另一个文件中的createStackNavigator：

const AppNavigator = createStackNavigator({
     login: {
        screen: login
     },
     home_customers: {
        screen: home_customers
     },
     settings_screen: {
        screen: settings_screen       
     },
     my_profile: {
        screen: my_profile        
     },
   },
     {
        initialRouteName: "login"
     }
);

【问题讨论】：

在你发的sn-p中，确实没有my_profile的画面。仅有的两个是Home 和More。
@YanickBélanger 我更新了我的问题，我实际上是在尝试导航到该屏幕。 More 和 Home 是我可以使用底部选项卡导航到的屏幕。当我转到More 屏幕时，我有一个按钮，onClick 应该将我发送到my_profile 屏幕。
这是否解决了您的问题stackoverflow.com/questions/47976460/…？
@BasvanderLinden 我不懂dispatch，我不能只使用navigation.navigate吗？我认为我唯一缺少的是将导航作为参数传递给类，但不知道如何操作。我可以看到很多使用函数而不是类的示例
嗯，问题是你不是从父母到孩子，而是从孩子到父母。如果是相反的方式，我们可以使用navigation.navigate，就像这里描述的reactnavigation.org/docs/nesting-navigators/…。所有像navigate 这样的导航功能都在后台reactnavigation.org/docs/navigation-prop/#dispatch 使用调度。答案使用 dispatch 的原因是因为它可以与 StackActions 结合，以重置导航状态，您可以从顶层导航到屏幕。

标签： reactjs react-native react-navigation

【解决方案1】：

从您更新的 sn-p 来看，您似乎在定义堆栈导航器时尝试使用 react-navigation V4 语法，并为选项卡导航器使用 V5 语法。

我建议您阅读堆栈导航guide 以便适当地定义您的屏幕。

完成后，您将能够正确导航。

【讨论】：

我正要提这个。如果 OP 想从孩子变成父母，尽管stackoverflow.com/questions/47976460/…，他可能仍然需要做这样的事情。但是重新考虑导航层次结构的设置方式 OP 可能完全可以避免这个问题。也就是说，首先确保您不需要从孩子导航到父母。
我使用的是通过 npm 下载的最新版本，为什么你说我使用的是版本 4？
我说您使用的是 V4 语法，而不是 V5 语法。请注意您的堆栈和选项卡导航器有何不同。