Question

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

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

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

我希望访问navigator，以便我push和pop。

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

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

这有可能吗？

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

Answer 1

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

您可以使用this.props.navigator装饰器访问@withNavigation。以下是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)
  }
}

Answer 2

你可以从你的第一个＆＃39;零件。并且您必须使用事件发射器从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');
  }
}

然后在第一个组件＆＃39;里面使用它作为你的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}));
  }

...
}

这样，您可以从按钮触发事件，然后在组件中捕获，然后导航到其他屏幕，或者尽可能地执行任何操作。让我知道它是否适合你。

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

2 个答案: