反应导航。在导航器顶部渲染额外的视图答案

【问题标题】：React navigation. Render extra views on top of navigator反应导航。在导航器顶部渲染额外的视图
【发布时间】：2018-07-03 12:10:07
【问题描述】：

我正在尝试创建一个 React Native 应用程序，该应用程序呈现一个具有可互换屏幕和固定视图以及一些额外数据/菜单的区域。我尝试了this官方React Navigation解决方案，但我无法让它工作。

import React, { Component } from "react";
import {createStackNavigator} from 'react-navigation';
import { Text, View,} from 'react-native';

import Details from './DetailsScreen';
import MainScreen from './MainScreen';

const RootStack = createStackNavigator({
   Main: {screen: MainScreen,
    navigationOptions: {
   header: null
   }
  },
   Details: {
    screen: Details,
  },);

class App extends Component {
  static router = {
    ...RootStack.router,
    getStateForAction: (action, lastState) => {
      return MyStack.router.getStateForAction(action, lastState);
    }
 };

  render() {
    const { navigation } = this.props;

    return(
      <View>
        <Text>Foo</Text>  //this is rendering
        <RootStack navigation={navigation}/>  //this is not
     </View>);
  }
}

export default App;

文章表单链接建议我可以将使用createStackNavigator() 创建的对象包装在父视图中，但仅当它是从render() 返回的唯一内容时才会呈现，否则它似乎被忽略了。链接中的示例声称可以“渲染其他内容”，但我无法使其工作。这种方式可以吗？

【问题讨论】：

标签： react-native react-navigation navigator

【解决方案1】：

你可以试试这个：

//wrapper.js

function wrapNavigator(Navigator, Wrapper, wrapperProps = {}) {
  const WrappedComponent = props => (
    <Wrapper { ...props, ...wrapperProps}>
      <Navigator {...props} />
    </Wrapper>
  );

  WrappedComponent.router = Navigator.router;
  WrappedComponent.navigationOptions = Navigator.navigationOptions;

  return WrappedComponent;
};

//app.js

const App = (props) => <View>
  <Text>Some text...</Text>
  {children}
</View>

export default wrapNavigator(Stack, App);

但是如果 App 组件没有父导航器，这将不起作用。

【讨论】：