React Native + Redux:什么是最好的首选导航? [英] React Native + Redux: What's the best and preferred navigation?

问题描述

我想将Redux用于React Native.当前我没有设置数据管理，因此index.ios.js具有以下内容:

I would like to use Redux for React Native. Currently I have no set data management, so the index.ios.js has the following:

  renderScene(route, navigator){
    this._navigator = navigator

    return (
        <route.component navigator={navigator} {...route.passProps}/>
    )
  }

<Navigator
  configureScene={this.configureScene}
  initialRoute={{name: 'Login', component: Login}}
  renderScene={(route, navigator) => this.renderScene(route, navigator)}
  style={styles.container}
  navigationBar={
    <Navigator.NavigationBar
      style={styles.navBar}
      routeMapper={NavigationBarRouteMapper}
    />
  }
/>

我打算切换到Redux.在我当前的设置中，不使用任何框架，唯一的例外是react-router，使用Redux导航的最佳方式是什么?使用存储，缩减器和操作的样本将非常有帮助.

I am planning to switch to Redux. With my current set up, not using any frameworks, only exception being react-router, what would be the most preferred way to navigate using Redux? A sample using store, reducers, and actions would be extremely helpful.

推荐答案

现在应使用react-navigation而不是NavigationExperimental.

react-navigation should be used now instead of NavigationExperimental.

-

我建议您使用NavigationExperimental而不是Navigator.最后一个折旧. RN文档中有一个示例，就在此处.它使用简单的reducer来管理您的导航状态.但是您也可以使用Redux来处理这种状态，因为它的逻辑相同.

I advise you use NavigationExperimental instead of Navigator. The last is depreciated. There is an example in the RN documentation, right here. It uses simple reducers to manage your navigation state. But you can also handle this state with Redux since it is the same logic.

这是我的带有标签的设置，使用Redux和NavigationExperimental:

navigator.js(注意:CardStack中的renderOverlay道具将在 0.32 )

import React from 'react';
import { NavigationExperimental } from 'react-native';
import { connect } from 'react-redux';
import { pop, push, selectTab } from './actions';

const {
  CardStack: NavigationCardStack,
} = NavigationExperimental;

class Navigator extends React.Component {
  constructor(props) {
    super(props);
    this._renderHeader = this._renderHeader.bind(this);
    this._renderScene = this._renderScene.bind(this);
  }

  _renderHeader(sceneProps) {
    return (
      <MyHeader
        {...sceneProps}
        navigate={this.props.navigate}
      />
    );
  }

  _renderScene(sceneProps) {
    return (
      <MyScene
        {...sceneProps}
        navigate={this.props.navigate}
      />
    );
  }

  render() {
    const { appNavigationState: { scenes, tabKey, tabs } } = this.props;

    return (
      <View style={{ flex: 1 }}>
        <NavigationCardStack
          key={`stack_${tabKey}`}
          navigationState={scenes}
          renderOverlay={this._renderHeader}
          renderScene={this._renderScene}
        />
        <Tabs
          navigationState={tabs}
          navigate={this.props.navigate}
        />
      </View>
    );
  }
}

const getCurrentNavigation = (navigation) => {
  const tabs = navigation.tabs;
  const tabKey = tabs.routes[tabs.index].key;
  const scenes = navigation[tabKey];
  return {
    scenes,
    tabKey,
    tabs,
  };
};

const mapStateToProps = (state) => {
  return {
    appNavigationState: getCurrentNavigation(state.navigation),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    navigate: (action) => {
      if (action.type === 'pop') {
        dispatch(pop());
      } else if (action.type === 'push' && action.route) {
        dispatch(push(action.route));
      } else if (action.type === 'tab' && action.tabKey) {
        dispatch(selectTab(action.tabKey));
      }
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Navigator);

actions.js

export function pop() {
  return ({
    type: 'POP_ROUTE',
  });
}

export function push(route) {
  return ({
    type: 'PUSH_ROUTE',
    route,
  });
}

export function selectTab(tabKey) {
  return ({
    type: 'SELECT_TAB',
    tabKey,
  });
}

reducer.js(注意:我在这里使用不可变的，但是使用任何适合自己的方法取决于你)

import { NavigationExperimental } from 'react-native';
import { Record } from 'immutable';

const {
  StateUtils: NavigationStateUtils,
} = NavigationExperimental;


export const InitialState = Record({
  // Tabs
  tabs: {
    index: 0,
    routes: [
      { key: 'tab1' },
      { key: 'tab2' },
      { key: 'tab3' },
    ],
  },
  // Scenes
  tab1: {
    index: 0,
    routes: [{ key: 'tab1' }],
  },
  tab2: {
    index: 0,
    routes: [{ key: 'tab2' }],
  },
  tab3: {
    index: 0,
    routes: [{ key: 'tab3' }],
  },
});
const initialState = new InitialState();


export default function navigation(state = initialState, action) {
  switch (action.type) {
    case 'POP_ROUTE': {
      const tabs = state.get('tabs');
      const tabKey = tabs.routes[tabs.index].key;
      const scenes = state.get(tabKey);
      const nextScenes = NavigationStateUtils.pop(scenes);

      if (scenes !== nextScenes) {
        return state.set(tabKey, nextScenes);
      }
      return state;
    }

    case 'PUSH_ROUTE': {
      const route = action.route;
      const tabs = state.get('tabs');
      const tabKey = tabs.routes[tabs.index].key;
      const scenes = state.get(tabKey);
      const nextScenes = NavigationStateUtils.push(scenes, route);

      if (scenes !== nextScenes) {
        return state.set(tabKey, nextScenes);
      }
      return state;
    }

    case 'SELECT_TAB': {
      const tabKey = action.tabKey;
      const tabs = state.get('tabs');
      const nextTabs = NavigationStateUtils.jumpTo(tabs, tabKey);

      if (nextTabs !== tabs) {
        return state.set('tabs', nextTabs);
      }
      return state;
    }

    default:
      return state;
  }
}

最后，在 MyScene.js 组件中，您可以通过测试当前路径(例如，使用开关)来简单地处理要显示的组件. 通过在组件中传递 navigate 函数，可以管理场景(即this.props.navigate({type:'push'，route:{key:'search'}}})).

Finally, in MyScene.js component you can simply handle the component to show by testing the current route (with a switch for example). By passing the navigate function in your components, you can manage your scenes (ie: this.props.navigate({ type: 'push', route: { key: 'search' } })).

请注意，您可以根据需要处理状态和操作.要理解的主要思想是如何减少状态，而不管是否使用redux.

Notice that you can handle your state and your actions as you wish. The main idea to understand is how the state is reduced, regardless you use redux or not.

这篇关于React Native + Redux:什么是最好的首选导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！