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

Question

我有一个配置有React NavigationV1 的项目。当我更新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
            }
        }
    }
}

输出：

当我从选项卡（例如：）中删除StackNavigator时User: Profile，图标将正确显示。我认为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：我没有测试我的代码。