javascript - react native + 终极版 : What's the best and preferred navigation?

Question

我想将 Redux 用于 React Native。目前我没有设置数据管理，所以 index.ios.js 有以下内容:

  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。根据我当前的设置，不使用任何框架，唯一的异常(exception)是 react-router，使用 Redux 导航的最首选方式是什么？使用 store、reducer 和 actions 的示例将非常有帮助。

Answer 1

编辑:现在应该使用 react-navigation 而不是 NavigationExperimental。

--

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

这是我的选项卡设置，使用 Redux 和 NavigationExperimental:

navigator.js(注意:CardStack 中的 renderOverlay 属性将在 0.32 中重命名为 renderHeader)

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' } }))。

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