我有一个带有react-navigation的应用程序,我想在其上绘制导航栏。我的app.js看起来像这样:
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<StatusBar barStyle='dark-content'></StatusBar>
<Navigation />
</Provider>
)
}
}
...
const AppNavigator = createStackNavigator({
Home: HomeView,
Detail: DetailView
},
let Navigation = createAppContainer(AppNavigator)
在作为根组件的HomeView中,我的渲染方法如下所示:
render() {
return (
<View style={{ flex: 1, backgroundColor: colors.backgroundColor }}>
{isModalVisible && <View style={styles.overlay}>
... Modal content
</View>}
... Other views
</View>
)
}
overlay: {
position: 'absolute',
zIndex: 1,
top: 0,
left: 0,
width: Dimensions.get('screen').width,
bottom: 0,
backgroundColor: '#000000A0',
},
我的问题是,模式视图不会在导航栏上渲染,即,该导航栏不在叠加层之下。我无法使用内置模态或react-native-modal,是否可以通过导航栏呈现常规视图?
我最终从与导航项处于同一级别的根容器中显示了模式视图。
RootContainer.js:
render() {
return (
<View style={{ flex: 1 }}>
<StatusBar barStyle='dark-content'></StatusBar>
<Navigation />
{isModalVisible && <View style={styles.overlay}>
... Modal content
</View> } />}
</View>
)
}
并且应用程序呈现RootContainer:
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<RootContainer />
</Provider>
)
}
}
这不是最佳的解决方案,因为您一直将组件中的数据一直传递到根。但这是反应导航的已知缺点之一。您可以在此处https://github.com/react-navigation/react-navigation/issues/363
看到一些想法和讨论对于那些使用redux的用户,请像我一样使用:您必须嵌套一个级别(不是从App渲染屏幕,而是从RootContainer渲染屏幕),因为redux不允许在App中创建存储并同时使用connect。参考:https://stackoverflow.com/a/41892948/837244