React Native - 为模态屏幕制作第二个标签栏导航器

Question

在 React Native 上构建一个相对简单的应用程序，我目前有一个tabBarNavigator，其中标签栏上的一个图标打开了一个弹出模式。然后，我尝试在模式底部创建另一个单独的标签栏。

然而，虽然我在我的根目录 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>
        );
    }
}

编辑：

有了下面的答案，我现在明白了。有没有办法将标签栏作为模态组件的子级？

https://ibb.co/kcTq0X3

Answer 1

'ModalContainer' 不是 'Routes' 的一部分，因此 SwitchNavigator 不知道它。

将 ModalContainer 添加为“路由”堆栈的一部分。 并显示 ModalContainer bottomTabs，单击 tabIcon 导航到 ModalContainer