如何在React Native应用中从根组件导航到某个屏幕(正在使用Redux导航)

时间:2019-04-16 06:21:04

标签: react-native redux react-redux redux-thunk

我是本机反应的新手,请原谅我不了解任何基础知识。我们正在使用ReduxNavigation和Thunk中间件进行导航。导航在所有屏幕上都可以正常工作。但是,我现在需要将FCM侦听器注册到根组件,并在消息到达时导航到特定屏幕。我在如何从根组件导航到应用程序屏幕组件方面遇到了问题

const middleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav
);

const RduxifiedNavigator = reduxifyNavigator(AppNavigator, "root");

class ReduxNavigation extends Component<Props> {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);

    FCM.getInitialNotification().then(notif => {
      console.log("notif: " + JSON.stringify(notif));

      // if (notif) {
      //   //setTimeout(() => {
      //   dispatch(
      //     NavigationActions.navigate({ routeName: "Notification" })
      //   );
      //   //}, 500);
      // }
    });


  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { navigation, dispatch } = this.props;
    if (navigation.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    const { navigation, dispatch } = this.props;
    return <RduxifiedNavigator state={navigation} dispatch={dispatch} />;
  }
}

const mapStateToProps = state => ({
  navigation: state.nav
});

const AppWithNavigationState = connect(mapStateToProps)(ReduxNavigation);

export const store = createStore(
  AppReducer,
  applyMiddleware(middleware, thunk)
);

export default class App extends Component<Props> {
  render() {
    return (
      // <View></View>
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

如何从此处导航至应用程序中的某些屏幕-

 FCM.getInitialNotification().then(notif => { });

我尝试使用this.props.navigation.navigate(),但是导航方法未在根对象的导航对象中定义

我也尝试过调度(NavigationActions.navigate({routeName:“ ROUTE_NAME”})),这里调度未显示

0 个答案:

没有答案