如何在没有导航道具的情况下使用 createSwitchNavigator 进行导航答案

【问题标题】：How to Navigate without the navigation prop with createSwitchNavigator如何在没有导航道具的情况下使用 createSwitchNavigator 进行导航
【发布时间】：2018-09-27 01:35:56
【问题描述】：

当我决定使用 redux 和 redux-saga 时，我已经在使用 react-native 和 react-navigation。我的问题是我不知道如何在 reducer 或 saga 文件中导航。我找到了这个link on how to navigate without navigation prop，但这个例子与我的入口文件（index.js）和顶级导航器（src/App.js，不确定这是否是顶级导航器）不同。

index.js（入口）

import React from "react";
import { Provider } from "react-redux";
import { AppRegistry } from 'react-native';
import store from './src/store';
import App from './src/App';

class Entry extends React.Component {
    render() {
      return (
        <Provider store={store}>
          <App />
        </Provider>
      );
    }
  }

AppRegistry.registerComponent('testApp', () => Entry);

src/App.js

import { createSwitchNavigator, createStackNavigator } from "react-navigation";

import HomeContainer from './containers/HomeContainer';
import SplashContainer from "./containers/SplashContainer";
import LoginContainer from "./containers/LoginContainer";

const HomeStack = createStackNavigator(
  {
    Home: HomeContainer,
  }
);

const LoginStack = createStackNavigator(
  {
    Login: LoginContainer,
  }
);

export default createSwitchNavigator(
  {
    Splash: SplashContainer,
    Dashboard: HomeStack,
    Login: LoginStack
  },
  {
    initialRouteName: "Splash"
  }
);

package.json

"react-native": "0.55.4",
"react-navigation": "^2.1.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-saga": "^0.16.0",

【问题讨论】：

你的 saga 和 reducer 在哪里？
嗨，已经解决了。如果我把导航放在我的减速器中可以吗？假设当我的登录成功时，它将导航到主页。 @数字

标签： react-native redux react-redux react-navigation redux-saga

【解决方案1】：

我通过在我的 src/App.js 中添加 ref 解决了这个问题。原来this 已经是答案了，我只是因为不同的例子或方法而感到困惑。

index.js（入口）

<Provider store={store}>
  <App ref={navigatorRef => {
    navigationService.setTopLevelNavigator(navigatorRef);
  }}/>
</Provider>

【讨论】：

如何使用该参考进行导航？

【解决方案2】：

我认为您是在问如何在 saga 文件中导航，即使您的问题没有显示 saga 文件。

您可以在您的 saga 正在侦听的操作中传递导航对象，然后在该文件中像往常一样使用它。

我正在使用它在成功注册操作后进行导航。这是一个例子。

在你的组件中：

class SignUpForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      email: '',
      password: '',
    };
  }
...
  dispatchSignUp() {
    const { email, password } = this.state;
    const { signUp, navigation } = this.props;

    signUp(email, password, navigation);
  }

  render() {
    ...
    <Button onPress={() => this.dispatchSignUp()} />
    ...
  }
}

export const mapDispatchToProps = dispatch => ({
  signUp: (email, password, navigation) => dispatch(signUpAction(email, password, navigation)),
});

export default connect(null, mapDispatchToProps)(SignUpForm);

你的行动：

const signUp = (email, password, navigation) => ({
  type: 'SIGN_UP',
  email,
  password,
  navigation,
});

export default signUp;

你的传奇：

import { takeLatest, call, put } from 'redux-saga/effects';
import { createUser } from '../services/index';

export function* signUpWorker(action) {
  try {
    const { email, password, navigation } = action;
    const payload = { email, password };
    const data = yield call(createUser, payload);

    yield put({ type: 'SIGN_UP_SUCCESS', data });

    navigation.navigate('Main');
  } catch (error) {
    yield put({ type: 'SIGN_UP_ERROR', error });
  }
}

export default function* signUpWatcher() {
  yield takeLatest('SIGN_UP', signUpWorker);
}

navigation.navigate('Main') 是重要的部分。希望路上没有太多垃圾。

干杯。

【讨论】：