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

Question

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

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

所以我从同一个地方创建

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

我想访问一个navigator我可以push和pop.

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

我还想要一种方法将道具传递给父母的路线组件(谁声明了<NavigationProvider>...).

这有可能吗？

注意:我不想使用Redux商店.显然,我可以通过全局功能实现任何目标.

Answer 1

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

首先定义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}));
  }

...
}

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