Как смешать два типа навигации в реагировать на родной

Question

Я работаю над приложением, использующим React Native. Я хотел бы иметь нижнюю навигацию в моем приложении (5.x). После того, как это будет сделано, я также хотел бы позволить пользователю переходить на просмотр профиля других пользователей. Но я не хочу, чтобы этот новый экран появлялся в нижней части навигации. Я не знаю, как это сделать. Нужно ли смешивать стековую навигацию и нижнюю навигацию? Как это сделать ?

Answer 1

ReactNative для этого использует Nesting Navigators.

Вы должны создать 2 отдельных компонента для каждого необходимого типа навигации, а затем передать вторичный навигатор в основной в качестве экрана, причем значение пропеллера компонента является навигатором, который является передается.

Передаваемый навигатор не должен быть окружен NavigationContainer, так как это приведет к ошибке, говорящей о том, что контейнер уже предоставлен или что-то в этом роде.

Как вы сказали передача двух из них как отдельного компонента в приложении. js создаст разделенный экран. @ Thomsath

См. Эту ссылку для получения более подробной информации: https://reactnavigation.org/docs/nesting-navigators/

Это изображение также было взято из вышеуказанной ссылки.

Answer 2

Я добавил навигатор в нижней вкладке, например:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import DetailsScreen from '../Screens/DetailsScreen';
import HomeScreen from '../Screens/HomeScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import TestScreen from '../Screens/TestScreen';
import {StyleSheet} from 'react-native';

const Tab = createBottomTabNavigator();

export default class Navigation {
    render() {
        return (
            <NavigationContainer style={styles.navigationContainer}>
                <Tab.Navigator style={styles.tabNavigator}>
                    <Tab.Screen style={styles.tabScreen} name="Detail" component={DetailsScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Home" component={HomeScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Test" component={TestScreen} hide={true} />
                </Tab.Navigator>
            </NavigationContainer>
        );
    }
}

const styles = StyleSheet.create({

});

Это отлично работает! После этого я добавил на главный экран стековый навигатор (для навигации по экранам, которых нет в навигаторе вкладок).

Но он не работает нормально, поскольку разделяет мой экран. Мой стековый навигатор выглядит так:

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../Screens/HomeScreen';
import DetailsScreen from '../Screens/DetailsScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const Stack = createStackNavigator();

export default function StackNavigation() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

Я добавил эти два файла в свой файл приложения, как с помощью тегов, и после импорта.

import ....

class App extends React.Component{

  render(){
    return (
        <View style={styles.container}>
          <Navigation />
          <StackNavigation />
        </View>
    );
  }
};