Question

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

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"
     }
);

Answer 1

在更新的代码段中，您似乎在定义堆栈导航器和选项卡导航器的V5语法时尝试使用react-navigation V4语法。

我建议您阅读堆栈导航guide，以便正确定义屏幕。

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

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

1 个答案: