Как перемещаться без навигационной опоры с помощью createSwitchNavigator - PullRequest
Новая
       64

Как перемещаться без навигационной опоры с помощью createSwitchNavigator

0 голосов
/ 27 сентября 2018

Я использую реагирующую натуру с реагирующей навигацией уже тогда, когда я решил использовать редукс и редукс-сагу.Моя проблема в том, что я не знаю, как перемещаться внутри редуктора или саги.Я нашел эту ссылку о том, как перемещаться без навигации 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",

Ответы [ 2 ]

0 голосов
/ 07 июля 2019

Я думаю, вы спрашиваете, как перемещаться внутри файла саги, даже если ваш вопрос не показывает файл саги.

Вы можете передать объект навигации в действии, которое ожидает ваша сага, и затем использовать его как обычно в этом файле.

Я использую это для навигации после успешного действия регистрации.Вот пример.

В вашем компоненте: 

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') является важной частью,Надеюсь, не было слишком много мусора на пути

Приветствия.

0 голосов
/ 27 сентября 2018

Я решил это, добавив ref в мой src / App.js.Оказывается, это уже ответ, я просто запутался из-за другого примера или подхода.

index.js (entry) 

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