reactjs - 如何使用 backBehavior: 'history' on my bottomtabnaviagor

Question

我的 Expo 应用程序中有一个 BottomTabNavigator 作为初始页面。每当我导航到另一个屏幕并返回时，我都希望打开 tabnavigator 上最后打开的选项卡。我已经读过：'backBehavior：'history' 就是这样做的，但它对我不起作用，而是转到初始选项卡。这是我的 Tabnavigator 代码：

class MainTabNavigator extends React.Component {

const DiscoverStack = createStackNavigator(
    {
        Discover: DiscoverScreen
    },
    { backBehavior: 'history' }
);

DiscoverStack.navigationOptions = {
    tabBarLabel: 'Ontdek',
    backBehavior: 'history',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={`${focused ? 'md-bulb' : 'ios-bulb'}`}
        />
    )
};

const TodoStack = createStackNavigator(
    {
        Todo: TodoScreen
    },
    { backBehavior: 'history' }
);

TodoStack.navigationOptions = {
    tabBarLabel: 'Wat te doen',
    backBehavior: 'history',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon focused={focused} name={'md-calendar'} />
    )
};

const ShopStack = createStackNavigator(
    {
        Shop: ShopScreen
    },
    { backBehavior: 'history' }
);

ShopStack.navigationOptions = {
    tabBarLabel: 'Shop',
    backBehavior: 'history',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon focused={focused} name={'md-cart'} />
    )
};

const WinStack = createStackNavigator(
    {
        Win: WinScreen
    },
    { backBehavior: 'history' }
);

WinStack.navigationOptions = {
    tabBarLabel: 'Win',
    backBehavior: 'history',
    tabBarIcon: ({ focused }) => (
        <Icon2
            focused={focused}
            size={26}
            style={{ marginBottom: -3 }}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
            name={'ticket'}
        />
    )
};

const UserStack = createStackNavigator(
    {
        User: UserScreen
    },
    { backBehavior: 'history' }
);

UserStack.navigationOptions = {
    tabBarLabel: 'Account',
    backBehavior: 'history',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon focused={focused} name={'md-person'} />
    )
};

export default createBottomTabNavigator(
    {
        DiscoverStack,
        TodoStack,
        ShopStack,
        WinStack,
        UserStack
    },
    { backBehavior: 'history' }
);

标签： reactjsreact-nativereact-navigationexpo

Answer 1

用作createAppContainer下面的代码。

反而

例子.js：

const defaultNavigationOptions = {
  headerTintColor: "color",
  headerStyle: {
    backgroundColor: "color"
  },
  headerTitleStyle: {
    fontWeight: "your select weight",
    fontSize: "select size"
  },
};

const DiscoverStack = createStackNavigator(
    {
        Discover: DiscoverScreen
    },
    {
    defaultNavigationOptions,
  }
);

const AppNavigator = createBottomTabNavigator(
  {
   dis : DiscoverStack,
   ...
  },
 backBehavior: 'history'
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;