Как реализовать навигатор стека реакции / bottomTab, используя кнопки «Назад» вместо вкладок для навигации?

Question

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

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

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

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

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

Это небольшой фрагмент из моего файла приложения. 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>
    );
  }
}

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

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 для рендеринга моей пользовательской панели вкладок. Затем я передал навигационную опору кнопкам. Затем я реализовал свою собственную навигационную логику c, используя 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);