react-native - 如何在其他屏幕的反应导航中导入底部导航器

Question

我创建了一个底部导航器，使用react-navigation. 如何将它用于底部导航器中未包含的其他屏幕？

const Stack = createStackNavigator({
intro: {
    screen: IntroSlides
},
dashboard: {
    screen: createBottomTabNavigator({
        inbox: {
            screen: Inbox,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: () => (
                    <Image resizeMode={'contain'} style={styles.icon} source={require('./src/assets/MyProfileIcon.png')} />
                ),
                title: 'Profile',
            }),
        },

        favourite: {
            screen: Favourite,
            navigationOptions: ({ navigation }) => ({
                tabBarIcon: () => (
                    <Image resizeMode={'contain'} style={styles.icon} source={require('./src/assets/FavouriteIcon.png')} />
                ),
                title: 'Favourite',
            }),

标签： react-native

Answer 1

将您的其他项目/屏幕放在堆栈导航器中：

const Bottom = createBottomTabNavigator({
    item1: {screen: Screen1},
    item2: {screen: Screen2},
    },{
        initialRouteName: "item1",
    }
)

export default createStackNavigator({
    tabs: Bottom,
    item3: Screen3, // your other screen
})

如果你想从 item3 屏幕中隐藏 stacknavigator，你可以在你的组件中使用它：

static navigationOptions = ({ navigation, screenProps }) => ({
    header: null
});