如何移动到底部选项卡抽屉中的不同屏幕而不在 React Native 的选项卡抽屉导航中注册？

Question

我正在创建一个 React Native 应用程序，我在其中使用底部选项卡抽屉，如附图所示。在这里的这个应用程序中，我只注册了四个屏幕，我有多个屏幕，比如 30 或 40 个，我无法在底部选项卡抽屉中注册它们，所以我只想要四个屏幕，每个屏幕内我想要多个屏幕。

现在让我们从 个人资料屏幕 开始，在我的个人资料屏幕中，我提供了一个按钮注册，它将让我进入注册屏幕，但是当我点击它时，它显示

The action 'JUMP_TO' with payload {"name":"RegisterScreen"} was not handled by any navigator.

Do you have a screen named 'RegisterScreen'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

如何在配置文件选项卡中打开注册屏幕？

我的底部标签代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import HomeScreen from './Screens/HomeScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from "@react-navigation/native-stack"

import SettingsScreen from './Screens/SettingsScreen';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import OrderScreen from './Screens/OrderScreen';
import ProfileScreen from './Screens/ProfileScreen';
import RegisterScreen from "./Screens/RegisterScreen"
import LoginScreen from './Screens/LoginScreen';

const Tab = createBottomTabNavigator();

const App= () => {

  return (
    <View style={styles.body}>
      <NavigationContainer>
    
        <Tab.Navigator
        initialRouteName='MyApp'
        screenOptions={{
          tabBarActiveTintColor:"#E0FFFF",
          tabBarActiveBackgroundColor:"#20B2AA"
        }}
        >
            <Tab.Screen 
            name="Home" 
            
            component={HomeScreen}
            options={{
              tabBarLabel:"Home",
              tabBarIcon:({color,size})=>(
                <MaterialCommunityIcons name='home' color={"black"} size={30}/>
              )
            }}
            
            />
            
            <Tab.Screen name="Settings" component={SettingsScreen} />
            <Tab.Screen name="Order" component={OrderScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen}/>

          </Tab.Navigator>

          
      </NavigationContainer>

    </View>
  );
};

const styles = StyleSheet.create({

  body:{
    flex:1,
    backgroundColor:"#fff"
  }

});

export default App;

这是我的个人资料屏幕代码：

import React from 'react'
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
import LoginScreen from './LoginScreen'
import RegisterScreen from './RegisterScreen'
import {NavigationContainer, useNavigation} from "@react-navigation/native"

const ProfileScreen = ({navigation}) => {
    // const navigation = useNavigation();
    return (
        <ScrollView>

            <View style={styles.body}>

                <View style={styles.tile}>
                    <View>
                        <Text style={{textAlign:"center",fontSize:20,fontWeight:"bold",color:"#000"}}>Your Accout</Text>
                    </View>
                    <View>
                        <Pressable
                            style={({pressd})=>[
                            {backgroundColor:pressd
                                ? 'rgb(210,230,255)':
                                    "red"
                            
                            },{ margin:10}
                        ]}
                        onPress={()=>{
                          navigation.jumpTo("RegisterScreen")
                        }}
                        >
                            <Text style={styles.registerButton}>Register</Text>

                        </Pressable>
                    </View>


                </View>

                <View style={styles.tile}>
                </View>

                <View style={styles.tile}>
                </View>

                <View style={styles.tile}>
                </View>

            </View>
            
                    
        </ScrollView>
    )
}
const styles = StyleSheet.create({
    body:{
        flex:1,
        
    },
    tile:{
        margin:5,
        backgroundColor:"red",
        borderRadius:10,
        height:200,
    
    },
    register:{
        justifyContent:"center"
    },
    registerButton:{
        padding:15,
        textAlign:"center",
        width:100,
        height:50,
        borderRadius:10,
        backgroundColor:"green",
        fontWeight:"bold",
        color:"black",
    }

})

export default ProfileScreen

Answer 1

navigation.jumpTo() 仅适用于底部选项卡屏幕。试试 navigation.navigate()

Answer 2

基本上，您的个人资料选项卡本身必须是一个导航器，初始屏幕是个人资料屏幕，请在下面找到相同的代码，

import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

const ProfileRoutes = () => {
return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    <Stack.Navigator />
}

在定义 Tab 路由时更改如下代码，

<Tab.Screen name="ProfileStack" component={ProfileRoutes}/>

在点击中，

navigation.navigate('Register');

如何移动到底部选项卡抽屉中的不同屏幕而不在 React Native 的选项卡抽屉导航中注册？

How to move to different screen in bottom tab drawer without registering it in tab drawer navigation in React Native?

reactjs

react-native

react-navigation

react-navigation-bottom-tab