Реагировать с родной навигацией

Question

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

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

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>

Спасибо

Answer 1

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

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

Answer 2

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

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

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'
    }
})