Реагируйте на навигацию. Отображать дополнительные виды поверх навигатора - PullRequest
Новая
       7

Реагируйте на навигацию. Отображать дополнительные виды поверх навигатора

0 голосов
/ 03 июля 2018

Я пытаюсь создать приложение React Native, которое отображает область со сменными экранами и фиксированным представлением с некоторыми дополнительными данными / меню. Я пытался это решение из официальной 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(), в родительский View, но он рендерится только тогда, когда это единственная вещь, возвращенная из render(), в противном случае он, кажется, игнорируется. Пример из ссылки утверждает, что можно «рендерить дополнительные вещи», но я не могу заставить его работать. Можно ли так сделать?

1 Ответ

0 голосов
/ 05 июля 2018

Вы можете попробовать это: 

//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.

...