导航在app.js中的appcontainer外部导航

Question

当前行为

我使用react导航v4x未定义的不是对象navigation.discpatch

预期行为

我想在appcontainer `中导航登录页面

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isFirstLaunch: false, hasCheckedAsyncStorage: false};
    const myRef = createRef();
  }

  onPressLogin() {
    this.navigator.dispatch(
      NavigationActions.navigate({ routeName: 'Login' })
    );
  }
  async componentDidMount() {
    const isFirstLaunch = await checkIfFirstLaunch();
    this.setState({isFirstLaunch, hasCheckedAsyncStorage: true});
  }

  render() {
    const {hasCheckedAsyncStorage, isFirstLaunch} = this.state;

    if (!hasCheckedAsyncStorage) {
      return null;
    }
    return isFirstLaunch ? (
      <EntryInfo onPress={this.onPressLogin} />
    ) : (
      <AppContainer
        ref={nav => {
          setTopLevelNavigator(nav);
          this.navigator = nav;
        }}
      />
    );
  }
}`

软件版本android反应-导航4.4.0反应-导航-栈2.8.2反应-本机0.62.2

Answer 1

在导航之前，只需确保导航器存在。它对我来说很有效

function setTopLevelNavigator(navigatorRef) {
if(navigatorRef)
{
   navigator = navigatorRef;
}
  
}

function navigate(routeName, params) {
  if(navigator && routeName){
   navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
  }
  
}

// add other navigation functions that you need and export them

export default {
  navigate,
  setTopLevelNavigator,
};