Estoy creando una aplicación RN y también la estoy creando para la web con RNWeb, pero me encuentro con dos problemas.

Primero, necesito deshacerme de algunos de los nombres en la ruta de la url, por ejemplo:

En mi App.js tengo un <NavigationContainer> en el que tengo un StackNavigator que va a una pantalla llamada Main . En la pantalla Main , tengo un navegador de pestañas con 5 pantallas de pestañas diferentes. Cada una de esas pantallas es un StackNavigator diferente que contiene múltiples StackScreens según el contexto de la pantalla TabNavigator (por ejemplo: la configuración en el navegador de pestañas contendrá StackSettings.Navigator y dentro residirá el componente de pantalla AppSettings . Pero el problema es que muestran en la URL, por ejemplo: http://app.com/StackSettings/AppSettings en lugar de http://app.com/AppSettings o http://app.com/StackHome/Home en lugar de http://app.com/Home

TLDR : tengo navegaciones apiladas dentro de cada pestaña de navegación y la URL se muestra así: http://app.com/StackNavigatorName/StackScreenName en lugar de http://app.com/StackScreenName

Y el segundo problema que estoy encontrando, si voy a otro Tab Navigator (por lo tanto, otro StackNavigator) y vuelvo al anterior (use back o lo elijo desde tab nav) no puedo hacer clic en nada en él.

Código:

Aplicación.js

 <NavigationContainer linking={{ prefixes: ["localhost"], config:{ screens:{ Main: { path: '/', }, }, }, }} > <Stack.Navigator initialRouteName="Main" > <Stack.Screen name="Main" component"Main"> </Stack.Navigator> </NavigationContainer>

Principal.js

 const StackNavigatorHome = () => ( <StackHome.Navigator initialRoute="Home"> <StackHome.Screen name="Home" component={Home}/> <StackHome.Screen name="Create" component={Create}/> </StackHome.Navigator> ) const StackNavigatorSettings = () => ( <StackSettings.Navigator initialRoute="Settings"> <StackSettings.Screen name="Settings" component={Settings}/> <StackSettings.Screen name="AppSettings" component={AppSettings}/> </StackSettings.Navigator> ) return( <Tab.Navigator > <Tab.Screen name="StackHome" component={StackNavigatorHome} /> <Tab.Screen name="StackSettings" component={StackNavigatorSettings} /> </Tab.Navigator> )