时间戳

首页 > 解决方案 > 如何使用后退按钮而不是选项卡来实现反应导航堆栈/bottomTab 导航器进行导航？

reactjs - 如何使用后退按钮而不是选项卡来实现反应导航堆栈/bottomTab 导航器进行导航？

问题描述

我已经实现了一个当前不使用任何类型导航的本机应用程序。我想实现反应导航，但正在努力重新创建我已经拥有的东西。下面我在下面添加了一些图片，以举例说明我目前没有反应导航的情况。我想使用 react-navigation 准确地复制它。

这是主屏幕：https ://ibb.co/XWxCpwt

这是右侧选项卡视图（左侧选项卡视图按钮更改为后退按钮）：https ://ibb.co/XzFB8v8

这是左侧选项卡视图（右侧选项卡视图按钮变为后退按钮）：https ://ibb.co/zP2ZBK5

我想明确一点，中心底部按钮与显示中心视图无关。它具有完全不同的功能。这就是为什么我希望后退按钮以这种方式工作的原因。

这是我的 App.js 文件中的一个小片段。如果没有 react-navigation，导出类上方的所有内容都将被注释掉。我没有花太多时间试图弄清楚这一点，因为我已经没有太多运气尝试使用 react-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);

标签： reactjsreact-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab

解决方案

我能够用这个解决方案解决我的配置问题。关键是使用 tabBarComponent 来呈现我的自定义标签栏。然后我将导航道具传递给按钮。然后我使用 this.props.nav.navigate('Community') 实现了我自己的导航逻辑（在我的例子中，我将导航道具传递为 'nav'）。这似乎运行良好 atm，每次导航到 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);

推荐阅读