Question

当我决定使用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",

Answer 1

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

index.js（条目）

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

Answer 2

即使您的问题未显示saga文件，我也认为您正在询问如何在saga文件中导航。

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

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

在您的组件中：

for (i in 1:39) print (table(Team.gm1$Result[Team.gm1$`AB #`==i]))

您的操作：

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); }是重要的部分。希望不会有太多的垃圾。

干杯。

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

2 个答案: