Question

我有一个带有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，可以通过导航栏呈现常规视图吗？

Answer 1

我最终从与导航项处于同一级别的根容器中显示了模式视图。

RootContainer.js：

{"AAPL":[{"t":1590090900,"o":317.06,"h":317.32,"l":317,"c":317.07,"v":5654},{"t":1590090960,"o":317.07,"h":317.07,"l":316.77,"c":316.78,"v":6608},{"t":1590091020,"o":316.73,"h":316.77,"l":316.585,"c":316.71,"v":12578},{"t":1590091080,"o":316.855,"h":317.17,"l":316.855,"c":317.04,"v":8184},{"t":1590091140,"o":317,"h":317.45,"l":316.77,"c":317.06,"v":21572}]}

并且App呈现RootContainer：

render() {
    return (
        <View style={{ flex: 1 }}>
            <StatusBar barStyle='dark-content'></StatusBar>
            <Navigation />

            {isModalVisible && <View style={styles.overlay}>
                                      ... Modal content
                               </View> } />}
        </View>
    )
}

...
const AppNavigator = createStackNavigator({
    Home: HomeView,
    Detail: DetailView
},

let Navigation = createAppContainer(AppNavigator)

这不是最佳的解决方案，因为您一直将组件中的数据一直传递到根。但这是反应导航的已知缺点之一。您可以在https://github.com/react-navigation/react-navigation/issues/363

上看到一些想法和讨论。

对于那些使用redux的用户，请像我这样使用：您必须嵌套一个级别（不是嵌套屏幕或来自App的模态，而是RootContainer），因为redux不允许在App中创建存储并同时使用connect。参考：https://stackoverflow.com/a/41892948/837244

在导航栏上反应本地渲染视图

1 个答案: