React Native Navigation 5 Вложенный

Я пытаюсь использовать вложенную навигацию в родном приложении. С одной стороны, мне нужна навигация по стеку, чтобы мои кнопки работали. С другой стороны, я хочу включить вкладку «Нижняя навигация». Мне удается реализовать и то, и другое по отдельности, но не вместе. Появляется ошибка, подобная следующей: «Действие навигации с полезной нагрузкой {name: Login} не было обработано никаким навигатором. Если вы пытаетесь перейти на экран во вложенном навигаторе, см.« Реагировать на веб-сайт навигации »(см. Изображение). Я проверил это но не повезло

Код для компонента навигации следующий

const Stack = createStackNavigator();
const MaterialBottomTopTabs = createBottomTabNavigator();

class Navigation extends Component {
  createHomeStack = () => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName="RegisterLogin">
        <Stack.Screen name="s" component={RegisterLogin} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Articles" component={Articles} />
      </Stack.Navigator>
    );
  };
  render() {
    return (
      <NavigationContainer>
        <MaterialBottomTopTabs.Navigator>
          <MaterialBottomTopTabs.Screen name="tab3" component={RegisterLogin} />
          <MaterialBottomTopTabs.Screen name="tab1" component={Articles} />
          <MaterialBottomTopTabs.Screen name="tab2" component={Sleep} />
        </MaterialBottomTopTabs.Navigator>
      </NavigationContainer>
    );
  }
}

а для доступа с кнопок есть

  <TouchableOpacity
            style={styles.registerButton}
            title="Register button"
            onPress={() => this.props.navigation.navigate('Register')}>
            <Text style={styles.registerText}>Register</Text>
          </TouchableOpacity>

Спасибо


reactjs navigation native react-navigation-v5
person Obsesie    schedule 24.04.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны вложить свой навигатор стека в нижний навигатор, чтобы достичь желаемого.

Я сделал вам полный пример:

import React from 'react'
import { Button, Text, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'

const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()

const RegisterLogin = ({ navigation }) => (
    <View style={styles.view}>
        <Text>Register Login Screen</Text>
        <Button
            title="Go to Register"
            onPress={() => navigation.navigate('Register')}
        />
        <Button
            title="Go to Login"
            onPress={() => navigation.navigate('Login')}
        />
        <Button
            title="Go to Articles"
            onPress={() => navigation.navigate('Articles')}
        />
        <Button
            title="Go to tab1 Articles"
            onPress={() => navigation.navigate('tab1')}
        />
    </View>
)

const Login = () => <View style={styles.view}><Text>Login Screen</Text></View>
const Register = () => <View style={styles.view}><Text>Register Screen</Text></View>
const Articles = () => <View style={styles.view}><Text>Articles Screen</Text></View>
const Sleep = () => <View style={styles.view}><Text>Sleep Screen</Text></View>

const homeOptions = {
    screenOptions: {
        headerShown: false,
    },
    initialRouteName: "RegisterLogin"
}

const HomeStack = () => (
    <Stack.Navigator {...homeOptions}>
        <Stack.Screen name="RegisterLogin" component={RegisterLogin} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="Articles" component={Articles} />
    </Stack.Navigator>
)

const Footer = () => (
    <Tab.Navigator>
        <Tab.Screen name="tab3" component={HomeStack} />
        <Tab.Screen name="tab1" component={Articles} />
        <Tab.Screen name="tab2" component={Sleep} />
    </Tab.Navigator>
)

export default props => (
    <NavigationContainer>
        <Footer />
    </NavigationContainer>
)

const styles = StyleSheet.create({
    view: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})
person CevaComic    schedule 24.04.2020

arrow_upward
0
arrow_downward

Спасибо за ответ, я тоже пришел с решением, я приложу код, надеюсь, кто-то из нуждающихся будет его использовать.


const Stack = createStackNavigator();
const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Articles" component={Articles} />
    <Tabs.Screen name="Sleep" component={Sleep} />
  </Tabs.Navigator>
);

export default CreateStack = () => (
  <NavigationContainer>
    <Stack.Navigator
      screenOptions={{headerShown: false}}
      initialRouteName={RegisterLogin}>
      <Stack.Screen name="RegisterLogin" component={RegisterLogin} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="Articles" component={TabsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);
person Obsesie    schedule 26.04.2020