StackNavigator是react-native的导航组件，其采用堆栈式的页面导航来实现各个界面跳转

• 引入

import { StackNavigator } from 'react-navigation';

import {NavigationColors} from './common/CommonColors';
import Login from './login/Login';
import ForgetPassword from './login/ForgetPassword';

除了需要引入 StackNavigator 组件外，还需要引入需要配置的页面组件

• 构造函数

// Return createNavigationContainer
export function StackNavigator(
  routeConfigMap: NavigationRouteConfigMap,
  stackConfig?: StackNavigatorConfig,
): NavigationContainer;

• routeConfigMap

  routeConfigMap 是路由配置，用于配置路由对应的页面

  // 路由配置
  const routeConfigMap = {
      Login: {
          screen: Login,   // 必须, 其他都是非必须
          navigationOptions: ({navigation}) => ({
              title: '登录',
              header: null,   // 隐藏顶部导航栏
          })
      },
      ForgetPassword: {
          screen: ForgetPassword,
      }
  };
  

  这里引入了登录以及忘记密码两个页面

  • screen 为页面对应的组件，必须配置
  • navigationOptions 页面的导航配置

• stackConfig

  stackConfig 是导航配置，用于配置导航的初始页面，以及页面相关的一些配置选项

  const stackConfig = {
      initialRouteName: 'Login',  // 默认显示界面
      mode: 'card',   // 页面跳转方式
      headerMode: 'screen',   // 导航的动画模式
      navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
          mode: 'card',   // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
          headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
          headerBackTitle: null,  //设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题
          headerTruncatedBackTitle: '返回',
          headerStyle: {      //导航栏的style
              backgroundColor: NavigationColors.navigationBGColor,
          },
          headerTitleStyle: {     //导航栏的title的style
              color: NavigationColors.navigationTitleColor,
              alignSelf : 'center',   //居中显示
          },
          headerTintColor: NavigationColors.navigationTintColor,  // 返回键的颜色
      },
  };
  
  

  • initialRouteName 初始路由，默认是路由配置的第一项
  • initialRouteParams 初始路由参数，可通过 this.props.navigation.state.params 获取
  • navigationOptions 页面的导航配置,相同的配置选项会被 routeConfigMap 中的配置覆盖
  • paths 路由中设置的路径的覆盖映射配置
  • mode 页面跳转方式
    • card 默认的跳转方式，相当于push
    • modal 模态跳转方式
  • headerMode 导航的动画方式
    • float 渐变，类似iOS原生效果
    • screen 与屏幕同步
    • none 没有动画
  • cardStyle 页面样式，这里可以统一配置
  • transitionConfig 跳转动画，会覆盖默认的动画
  • onTransitionStart 页面开始跳转时条用
  • onTransitionEnd 页面跳转完成时调用

• navigationOptions

  navigationOptions 是页面的导航配置，既可以在routeConfigMap配置公共的通用的导航配置，还可以在 stackConfig 中对每个页面进行单独的导航配置，也可以在页面中进行静态配置，这种方式适合需要动态更新某些导航设置的页面。

  导航配置的优先级是：

  页面的静态配置 > routeConfigMap > stackConfig
  

  navigationOptions 选项解析：

  • title 标题，可以作为头部标题 headerTitle ，或者 Tab 标题 tabBarLabel，如果设置了这个，导航栏和标签栏的 title 就会变成一样的，==不推荐使用==
  • header 导航的属性，如果隐藏顶部导航栏只要将这个属性设置为 null
  • headerTitle 导航栏标题，推荐使用
  • headerBackTitle 返回标题，默认为上个页面的标题，如果想不显示，可以设置为 null
  • headerTruncatedBackTitle 返回标题不符合显示时，显示此属性
  • headerRight 导航右边组件
  • headerLeft 导航左边组件
  • headerStyle 导航样式
  • headerTitleStyle 导航标题样式
  • headerBackTitleStyle 导航返回标题的样式
  • headerTintColor 导航栏颜色
  • headerPressColorAndroid 导航颜色纹理，仅安卓5.0以上版本可用
  • gesturesEnabled 侧滑返回设置，iOS 默认 true，Android 默认 false

  页面导航的静态配置:

  static navigationOptions = ({ navigation }) => ({
      headerTitle: `${navigation.state.params.title}`,    // 动态更新标题
  });
  

• 渲染

  配置完后就可以使用了

  const Navigations = StackNavigator(routeConfigMap, stackConfig);
  
  export default class App extends Component<Props> {
  
      render() {
          return <Navigations />;
      }
  }