React native React Native-为模式屏幕制作第二个选项卡栏导航器

在React Native上构建一个相对简单的应用程序，我目前有一个

tabBarNavigator

，其中选项卡栏上的一个图标会打开一个弹出模式。然后我尝试在模式的底部创建另一个单独的选项卡栏

然而，尽管我已经在我的root

App.js

中创建了一个

tabBarNavigator

和

appContainer

，并导出了这个容器（通过我的模态组件传递），模态然后加载基本堆栈，而不是我创建的模态堆栈-显然不是期望的行为

App.js的相关部分：

const ModalNavigator = createBottomTabNavigator({
        Photo: { screen: PrivacySettings,
                navigationOptions: {
                  headerMode: false,
                  tabBarIcon: ({ tintColor }) => <Feather name="camera" size={24} color="black" />
                 }
              },
        Camera: { screen: HelpSettings,
                  navigationOptions: {
                    headerMode: false,
                    tabBarIcon: ({ tintColor }) => <Feather name="type" size={24} color="black" />
                }
             },
        Text: { screen: ContactUs,
                 navigationOptions: {
                   headerMode: false,
                   tabBarIcon: ({ tintColor }) => <Feather name="type" size={24} color="black" />
               }
           }
       });

export const ModalContainer = createAppContainer(ModalNavigator);

const AppContainer = createStackNavigator({
    default: createBottomTabNavigator({
  Home: { screen: Home,
          navigationOptions: {
            headerMode: false,
            tabBarIcon: ({ tintColor }) => <FontAwesomeIcon size={30} icon={faHome} color={tintColor}/>
           }
        },
  Search: { screen: Contacts,
            navigationOptions: {
              headerMode: false,
              tabBarIcon: ({ tintColor }) => <FontAwesomeIcon size={30} icon={faSearch} color={tintColor}/>
           }
        },
  AddPhoto: { screen: () => null,
              navigationOptions: {
                headerTitle: "Upload Photo",
                tabBarIcon: <AddPhotoButton/>,
                headerMode: 'none',
           }
        },
  Likes: {screen: Vault,
          navigationOptions: {
            headerMode: false,
            tabBarIcon: ({ tintColor }) => <FontAwesomeIcon size={30} icon={faHeart} color={tintColor}/>
           }
        },
  Settings: {screen: Me,
             navigationOptions: {
               headerMode: false,
               tabBarIcon: ({ tintColor }) => <FontAwesomeIcon size={30} icon={faUser} color={tintColor}/>
             }
           }
       },
  {
    defaultNavigationOptions: {
        tabBarOnPress: ({ navigation, defaultHandler }) => {
              if (navigation.state.key === 'AddPhoto') {
                  navigation.navigate('addPhotoModal')
              } else {
                  defaultHandler()
              }
          },
            cardStyle: {
                    backgroundColor: "transparent",
                    opacity: 1
                }
        },
    tabBarOptions: {
      showLabel: false,
      activeTintColor: '#1A86CB',
      inactiveTintColor: 'black'
    },
    initialRouteName: "Home",
}),
  addPhotoModal: {
      screen: AddPhotoModal }
    }, {
        mode: 'modal',
        headerMode: 'none',
        transparentCard: true,
}
)

const Routes = createStackNavigator({

  Home: { screen: AppContainer,
          navigationOptions: {
            headerShown: false }
        },
  SignIn: { screen: SignIn },
  AddContact: { screen: AddContact,
                navigationOptions: {
                  headerTitle: "Add Contact" }
        },
  ContactDetails: {screen: ContactDetails },
  PrivacySettings: {screen: PrivacySettings,
                    navigationOptions: {
                      headerTitle: "Privacy",
                      headerStyle: {
                          backgroundColor: 'white',
                          shadowColor: 'transparent'
                      }}
        },
  NotificationSettings: {screen: NotificationSettings,
                    navigationOptions: {
                      headerTitle: "Notifications",
                      headerStyle: {
                          backgroundColor: 'white',
                          shadowColor: 'transparent'
                      }}
        },
  HelpSettings: {screen: HelpSettings,
                    navigationOptions: {
                      headerTitle: "Help",
                      headerStyle: {
                          backgroundColor: 'white',
                          shadowColor: 'transparent'
                      }}
        },
  InviteSettings: {screen: InviteSettings,
                    navigationOptions: {
                      headerTitle: "Invite Friends",
                      headerStyle: {
                          backgroundColor: 'white',
                          shadowColor: 'transparent'
                      }}
        },
  ContactUs: {screen: ContactUs,
                    navigationOptions: {
                      headerTitle: "Contact Us",
                      headerStyle: {
                          backgroundColor: 'white',
                          shadowColor: 'transparent'
                      }}
        },
},
  { initialRouteName: "Home",
});

const AuthStack = createStackNavigator({
    Login: SignIn,
})


export default createAppContainer(
  createSwitchNavigator(
    {
      Loading: LoadingScreen,
      App: Routes,
      Auth: AuthStack
    },
    {
      initalRouteName: LoadingScreen
    }
  )
)

import ModalContainer from '../../App'

export default class AddPhotoModal extends React.Component {

    render() {
        return(
                  <View style={{backgroundColor:"#000000CC", flex:1}}>
                    <View style={{ backgroundColor:"#ffffff", marginLeft: 0, marginRight: 0, marginTop: 240, padding: 20, borderRadius: 20, flex: 1, }}>
                        <View style={styles.header}>
                            <TouchableOpacity style={{position: 'absolute'}} onPress={() => this.props.navigation.goBack()}>
                                <Text style={styles.buttonFont}>Back</Text>
                            </TouchableOpacity>

                            <TouchableOpacity style={{position: 'absolute', right: 0}} onPress={() => this.props.navigation.navigate('UploadScreen')}>
                                <Text style={styles.buttonFont}>Continue</Text>
                            </TouchableOpacity>
                        </View>
                            <ModalContainer/>
                    </View>
                 </View>
        );
    }
}

const ModalNavigator=createBottomTabNavigator({
照片：{屏幕：PrivacySettings，
导航选项：{
headerMode:false，
tabBarIcon:（{tintColor}）=>
}
},
摄像头：{屏幕：帮助设置，
导航选项：{
headerMode:false，
tabBarIcon:（{tintColor}）=>
}
},
文本：{屏幕：ContactUs，
导航选项：{
headerMode:false，
tabBarIcon:（{tintColor}）=>
}
}
});
导出常量ModalContainer=createAppContainer（ModalNavigator）；
const AppContainer=createStackNavigator({
默认值：CreateBoottomTabNavigator({
主页：{屏幕：主页，
导航选项：{
headerMode:false，
tabBarIcon:（{tintColor}）=>
}
},
搜索：{屏幕：联系人，
导航选项：{
headerMode:false，
tabBarIcon:（{tintColor}）=>
}
},
AddPhoto:{screen:（）=>null，
导航选项：{
标题：“上传照片”，
tabBarIcon:
'ModalContainer'不是“路线”的一部分，因此SwitchNavigator不知道它

将ModalContainer添加为“路由”堆栈的一部分。
要显示ModalContainer底部选项卡，请单击选项卡图标导航至ModalContainer。“ModalContainer”不是“Routes”的一部分，因此SwitchNavigator不知道它

将ModalContainer添加为“路由”堆栈的一部分。
要显示ModalContainer底部选项卡，请单击选项卡图标导航到ModalContainer
这很有效，因为它更接近了！但是，如果有意义的话，现在我将底部选项卡栏和模态都作为对等组件，当我真的试图将选项卡栏放置在模态的边界内时。我在上面放置了一个图片引用！我没有尝试过嵌套的选项卡栏。从指南中，您可以尝试这些选项，或者希望它能帮助您。这很好，因为它离我们更近了一步！但是，如果这有意义的话，现在我最终将底部选项卡栏和模式作为对等组件，我没有这样做？当我真正尝试将选项卡栏放置在模式的边界内时。我在上面放置了一个图片引用！我没有已尝试嵌套选项卡栏。从指南中，您可以尝试这些选项，也可以希望对您有所帮助