Создание относительно простого приложения на React Native, в настоящее время у меня есть tabBarNavigator, где один из значков на панели вкладок открывает всплывающее модальное окно. Затем я пытаюсь создать еще одну отдельную панель вкладок в нижней части модальной.
Однако, хотя я создал tabBarNavigator и appContainer в моем root App.js и экспортировал этот контейнер (пропуская его через мой модальный компонент), модал затем загружает базовый стек, а не созданный мной модальный стек - явно нежелательное поведение!
Соответствующая часть приложения. 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