Как реализовать навигатор стека реакции-навигации / нижней вкладки с использованием кнопок возврата вместо вкладок для навигации?

Question

Я реализовал собственное приложение для реагирования, которое в настоящее время не использует никаких типов навигации. Я хочу реализовать реагирующую навигацию, но изо всех сил пытаюсь воссоздать то, что у меня уже есть. Ниже я добавил несколько изображений, чтобы показать пример того, что у меня сейчас есть без реакции-навигации. Я хотел бы это точно воспроизвести с помощью реакции-навигации.

Это домашний экран: https://ibb.co/XWxCpwt

Это правая вкладка (левая кнопка просмотра вкладки меняется на кнопку возврата): https://ibb.co/XzFB8v8

Это левая вкладка (правая кнопка просмотра вкладки меняется на кнопку возврата): https://ibb.co/zP2ZBK5

Я хочу прояснить, что центральная нижняя кнопка не имеет ничего общего с отображением центрального вида. У него совершенно другой функционал. Вот почему я хотел бы, чтобы кнопки возврата работали именно так.

Это небольшой фрагмент из моего файла App.js. Без реакции-навигации все, что находится выше экспортированного класса, было бы закомментировано. Я не потратил много времени, пытаясь понять это, поскольку мне уже не повезло, пытаясь реализовать с помощью response-native-navigation. Любая помощь будет оценена по достоинству!

const TabNavigator = createBottomTabNavigator({
  Community: Community,
  Root: Root,
  Network: Network
});

const RootStack = createStackNavigator({
    Root: Root
});

const Navigation = createAppContainer(TabNavigator);

// Everything above this line would normally be commented out and <Root /> would
// be inside the exported class instead of <Navigation />

export default class App extends Component {
  render() {

    return (
        <Provider store={persistStore.store} >
            <PersistGate loading={null} persistor={persistStore.persistor}>
                <Navigation />
            </PersistGate>
        </Provider>
    );
  }
}

Я обновил свой App.js. Это самое близкое, что мне удалось до сих пор. Следующие необходимые шаги - настроить вкладки так, чтобы при щелчке не отображалось представление, которое в настоящее время связано с вкладкой, а вместо этого нужно переключиться на кнопки возврата, чтобы вернуть пользователя на главный экран (корневой компонент). Желаемый вид навигации этого приложения - создать ощущение, будто три вида расположены рядом. Пользователь может перемещаться только по одному представлению за раз и не может переходить между ними.

const TabNavigator = createBottomTabNavigator({
    Community: Community,
    Home: Root,
    Network: Network
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: {
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />
        }
    }
});


const Navigation = createAppContainer(RootStack);

Answer 1

Я смог решить мою проблему с конфигурацией с помощью этого решения. Ключевым моментом было использование tabBarComponent для отображения моей настраиваемой панели вкладок. Затем я передал опору навигации кнопкам. Затем я реализовал свою собственную логику навигации, используя this.props.nav.navigate("Сообщество") (в моем случае я передал свойство навигации как "nav"). Кажется, это работает хорошо, есть небольшая проблема с рендерингом Rootstack, который немного поднимается и скользит вниз каждый раз при переходе к нему.

const HomeStack = createDrawerNavigator({
    Root: Root,
    Profile: Profile
},{
    initialRouteName: 'Root',
    drawerWidth: SCREEN_WIDTH,
    contentComponent: props => (
        <ProfileSidebar drawerNavigator={props.navigation}/>
    )
});

const TabNavigator = createBottomTabNavigator({
    Community: {
        screen: Community
    },
    Home: HomeStack,
    Network: {
        screen: Network
    }
},{
    initialRouteName: 'Home',
    tabBarComponent: props => (
        <View style={styles.nocturnFooter}>
            <NavButton nav={props.navigation}/>
            <NocturnButton />
            <CommunityButton nav={props.navigation}/>
        </View>
    ),
});

const RootStack = createStackNavigator({
    Root: {
        screen: TabNavigator,
        navigationOptions: ({ navigation }) => ({
            headerLeft: () => <ProfileSidebarButton />,
            headerTitle: () => <Search />,
            headerRight: () => <MapFilterButton />,
            headerTransparent: navigation.state.index == 1 ? true : false,
            headerStyle: navigation.state.index != 1 ? {
                backgroundColor: '#000000'
            } : {}
        })
    }

});


const Navigation = createAppContainer(RootStack);