react-native - 在自定义的 BottomTabNavigator 中嵌套 StackNavigator，React Navigation V>2

Question

我有一个配置了 React Navigation 的项目V1。当我更新 React Navigation到第 2 版，选项卡图标消失了……这是路由结构:

public static Routes = createStackNavigator({
    Splash: { screen: Splash },
    EditProfile: { screen: EditProfile },
    Main: {
        screen: createBottomTabNavigator({
            Search: {
                screen: createStackNavigator({
                    Home: { screen: Home },
                    DoctorList: { screen: DoctorList },
                }, stackConfig('Home')
                )
            },
            Bookmark: {
                screen: createStackNavigator({
                    BookmarkList: { screen: BookmarkList },
                }, stackConfig('BookmarkList')
                )
            },
            User: {
                screen: createStackNavigator({
                    Profile: { screen: Profile },
                }, stackConfig('Profile')
                )
            },
        }, tabConfig('Search'))
    }
}, stackConfig('Splash')
)


let stackConfig = (initialRouteName: any): any => {
    return {
        initialRouteName: initialRouteName,
        headerMode: 'none',
        cardStyle: {
            backgroundColor: 'transparent'
        },
    }
}

let tabConfig = (initialRouteName: any): any => {
    return {
        initialRouteName: initialRouteName,
        tabBarComponent: TabBarComponent,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            labelStyle: {
                fontFamily: Utility.font,
                fontSize: Platform.OS !== 'ios' ? 9 : 11,
                margin: 0,
            },
            activeTintColor: '#2e9699',
            inactiveTintColor: 'black',
            showIcon: true,
            showLabel: true,
            indicatorStyle: {
                backgroundColor: 'red',
            },
            style: {
                zIndex: 1,
                backgroundColor: "#ffffff",
                height: 60
            }
        }
    }
}

输出:



当我从选项卡(例如: User: Profile )中删除 StackNavigator 时，图标将正确显示。我认为 V1 和 V2 之间的差异导致了这一点，但我不知道。

例如， Profile.tsx是这样的:

export default class Profile extends Component {
    static navigationOptions = {
        tabBarIcon: ({ tintColor, focused }) => (
            <Icon name="md-person" size={27} color={focused ? colors.green : colors.black} />
        )
    };
}

谢谢。

Answer 1

在 V2 中，导航选项只能配置其直接父项。 示例 :您的个人资料屏幕只能为其父级 stacknavigator 进行配置。您的个人资料屏幕无法设置 createBottomTabNavigator 选项 无需改组导航器

如果要配置 createBottomTabNavigator 选项 ，您可以按如下所示进行:

public static Routes = createStackNavigator({
    Splash: { screen: Splash },
    EditProfile: { screen: EditProfile },
    Main: {
        screen: createBottomTabNavigator({
            Search: {screen: HomeStack},
            Bookmark: {screen: BookmarkStack},
            User: {screen:UserStack},
        }, tabConfig('Search'))
    }
}, stackConfig('Splash')
);

HomeStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-person" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

BookmarkStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-bookmark" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

UserStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: "Explore",
    tabBarIcon: ({ focused, tintColor }) => (
         <Icon name="md-user" size={27} color={focused ? colors.green : colors.black} />
    )
  };
};

我希望它对你有用。 PS:我没有测试我的代码。