从子导航容器返回父导航容器

问题描述 投票:0回答:1

我的整个导航生命周期(解释):

应用程序.js: 路线(堆栈屏幕):启动屏幕,登录屏幕,注册屏幕,

optpscreen(组件=(子)

Drawernavigation.js:

Nav(抽屉屏幕):主屏幕,注销屏幕( componenet = 登录屏幕(在路线导航容器中定义,用于注销时重置目的)

面临的问题:无法从导航(注销)导航到路线(登录屏幕)---想要重置

代码:-

应用程序.js

const Stack = createNativeStackNavigator();


export function Route(){
  return(<>
  <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName='SplashScreen' screenOptions={{headerStyle:{
        backgroundColor:'#e6e6e6'
      }}}>

        
        {/* drawerScreen */}
        <Stack.Screen name="Nav" options={{ headerShown: false }} component={Nav} />
        
        {/* Navigation screens */}
        <Stack.Screen  options={{headerShown: false}}  name="SplashScreen" component={SplashScreen} />
        <Stack.Screen options={{headerShown: false}} name="LoginScreen" component={LoginScreen} />
        <Stack.Screen options={{title:''}} name="Otpscreen" component={Otpscreen} />
        <Stack.Screen options={{title:''}} name="Registerscreen" component={Registerscreen} />



      </Stack.Navigator>
    </NavigationContainer>
  </>)
}


function App(){
  
  return(<>
<Route />
  </>)
}

export default App;

DrawerNvigation.js

const Drawer = createDrawerNavigator();



const CustomDrawer = (props) => {
    return (<>
    
       <View>
       <View>
        <Image style={styles.Imagecss} source={require('../../assets/bq1.jpg')} />
       </View>
       <Text style={styles.BanquetNameCss}>Centeral Venue</Text>
       </View>
        <Text></Text>
        <DrawerItemList {...props} />
    
    </>)
}

return(
<>
    <StatusBar barStyle="dark" />
   
   
    <NavigationContainer independent={true}>

        <Drawer.Navigator drawerContent={(props)=><CustomDrawer {...props}/>} initialRouteName="Inquiries">

    <Drawer.Screen name="Inquiries" component={Mainscreen} 
        options={{
        drawerLabel:"Home"  ,
        drawerIcon: ({size}) => ( 
        <Icon name="home"  
        size={size} 
        color='black'
        /> ),
        }} />


<Drawer.Screen name="Sign Out" component={LoginScreen} 
        options={{
            drawerLabel:"Sign Out",
            drawerIcon: ({size}) => (
       
            <Icon name="sign-out"
        size={size}
        color='black'
        /> ) }}


> listeners={({navigation})=>{
> navigation.replace(<Route/>)
        }}

        />
   
        </Drawer.Navigator>
    
        </NavigationContainer>
    </>)
}

无法从子级导航到父级任何人都可以帮助我让这个导航生命周期正常工作:)

我尝试使用这个逻辑

<Drawer.Screen name="Sign Out" component={LoginScreen} 

我的login.js代码:

function LoginScreen({navigation}){

    function preshandler(){
 navigation.navigate('Registerscreen');
    }

但它显示有效负载错误,如下所示: 错误

reactjs react-native react-hooks react-navigation react-native-navigation
1个回答
1
投票

根据React Navigation官方文档,导航器中

independent
支持
true
表示断开任何父导航器

所以,这应该是您无法导航回父堆栈导航器的主要原因。

或者你有什么理由吗?

© www.soinside.com 2019 - 2024. All rights reserved.