ExNavigation - 从父组件或从 renderRight 访问导航器答案

【问题标题】：ExNavigation - Access navigator from parent component or from renderRightExNavigation - 从父组件或从 renderRight 访问导航器
【发布时间】：2017-04-04 03:28:49
【问题描述】：

我在我的Exponent 项目中使用ExNavigation。

如何从路由组件外部进行导航？

所以从我创建的同一个地方

<NavigationProvider router={router}>
    <StackNavigation initialRoute={router.getRoute('First')}/>
</NavigationProvider>

我想访问navigator，这样我就可以push 和pop。

另一种选择是从First 组件内部推送，但我在renderRight 组件中执行此操作，该组件在我的static route 中声明，因此我无权访问this.props.navigator。

我还想要一种将 props 从父级（声明<NavigationProvider>...）传递给路由组件的方法。

这有可能吗？

注意：我不想为此使用 Redux 商店。显然，我可以通过全局函数实现任何目标。

【问题讨论】：

标签： navigation react-native

【解决方案1】：

另一种选择是从 First 组件内部推送，但我在 renderRight 组件中执行此操作，该组件在我的静态路由中声明，因此我无权访问 this.props.navigator。

您可以使用@withNavigation 装饰器访问this.props.navigator。这是LogoutButton 按钮的示例，您可以在renderRight 中使用。

import React, {Component} from "react";
import {AsyncStorage, Button} from "react-native";
import Router from "../../Router";
import {withNavigation} from "@exponent/ex-navigation/src/ExNavigationComponents";

@withNavigation
export default class LogoutButton extends React.Component {
  render() {
    return (
        <Button
            title='Log out'
            onPress={()=>{this.doLogout()}}/>
    )
  }

  doLogout() {
    AsyncStorage.clear();
    this.props.navigator.immediatelyResetStack([Router.getRoute('login')], 0)
  }
}

【讨论】：

【解决方案2】：

您可以从“第一个”组件中执行此操作。您必须使用事件发射器从 renderRight 按钮发出单击事件，在您的 First 组件中捕获该事件并从那里推送新路由。您也可以使用它传递道具。这是解决方案。

首先定义 renderRight 按钮类。

var EventEmitter = require('EventEmitter');

class NextButton extends React.Component {
  constructor(props) {
    super(props);
    this.nextPressed = this.nextPressed.bind(this);
    this.getView = this.getView.bind(this);
  }

  render() {
    return(
      this.getView()
    );
  }

  getView() {

      return (
        <TouchableHighlight
          onPress={this.nextPressed}
          underlayColor='transparent'
          style={Styles.rightBarButton}>
          <Text
          style={[Styles.rightBarButtonText, Styles.fontStyle, {color:'#6A6A6A'}]}>Next</Text>
        </TouchableHighlight>
      );
  }

  nextPressed() {
    console.log("nextPressed CALLED!");
    this.props.emitter.emit('nextpressed');
  }
}

然后将其用作“第一个组件”内的 renderRight 按钮。此外，您需要捕获触发的事件并推送下一个组件。

class First extends Component {

  static route = {
    navigationBar: {
      title: 'FIRST SCREEN',
      titleStyle: [Styles.navigationBarTitle, Styles.fontStyle],
      tintColor: '#000',
      renderRight: ({ config: {eventEmitter} }) => (<NextButton emitter={eventEmitter}/>)
    },
  }

constructor(props) {
    super(props);
    this.pressedEventCallback = this.pressedEventCallback.bind(this);
}

...

componentWillMount() {

   this._buttonPressSubscription = this.props.route.getEventEmitter().addListener('nextpressed', this.pressedEventCallback);
}

componentWillUnmount() {

    this._buttonPressSubscription.remove();
  }

...

  pressedEventCallback() {
    this.props.navigator.push(Router.getRoute('Second', {prop1: prop1, prop2: prop2}));
  }

...
}

这样，您可以从按钮触发事件，然后在您的组件中捕获，然后导航到传递道具的其他屏幕或做任何您能做的事情。让我知道它是否适合你。

【讨论】：