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：我没有测试我的代码。

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

1 个答案: