React-Native之react-navigation

先写下react-navigation的StackNavigator、TabNavigator的使用方法，用到其他的再持续更新。

StackNavigator

/**
 * @routeConfigMap是一个NavigationRouteConfigMap类型的必填参数
 * @stackConfig是一个StackNavigatorConfig类型的必填参数
 */
StackNavigator(routeConfigMap,stackConfig?);

• StackNavigator的NavigationRouteConfigMap

NavigationRouteConfigMap有两种选择
{ "自定义路由名称" : NavigationComponent }
或
{
    "自定义路由名称": {
        screen: NavigationComponent; //或者：getScreen: () => NavigationComponent
        path?:string; //深度链接的路径
        navigationOptions?: {
            header?: (React.ReactElement<any> | ((headerProps: HeaderProps) => React.ReactElement<any>)) | null; //自定义header;如果想隐藏顶部导航条只要将这个属性设置为null
            headerTransparent?: boolean; //标题是否透明
            headerTitle?: string | React.ReactElement<any>; //设置导航栏标题，设置后不会改变tab的名称。
            headerTitleStyle?: StyleProp<TextStyle>; //设置导航条文字样式
            headerTintColor?: string; //设置导航栏文字颜色
            headerLeft?: React.ReactElement<any>; //设置导航条左侧
            headerBackTitle?: string | null; //设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
            headerTruncatedBackTitle?: string; //设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）
            headerBackTitleStyle?: StyleProp<TextStyle>; //设置导航条返回文字样式
            headerPressColorAndroid?: string; //安卓独有的设置颜色纹理，需要安卓版本大于5.0
            headerRight?: React.ReactElement<any>; //设置导航条右侧
            headerStyle?: StyleProp<ViewStyle>; //设置导航条的样式
            headerBackground?: React.ReactNode | React.ReactType; 
            gesturesEnabled?: boolean; //是否支持滑动返回手势，iOS默认支持，安卓默认关闭
            gestureResponseDistance?: { vertical?: number;  horizontal?: number } //对象覆盖触摸从屏幕边缘开始的距离，以识别手势
        }
    }
}

• StackNavigator的StackNavigatorConfig

{
    mode?: 'card' | 'modal'; //页面切换时的动画，card：使用iOS和安卓默认的风格。modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
    headerMode?: 'float' | 'screen' | 'none'; //边缘滑动返回上级页面时动画效果。float：iOS默认的效果，可以看到一个明显的过渡动画。screen：滑动过程中，整个页面都会返回。none：没有动画
    cardStyle?: StyleProp<ViewStyle>; //自定义设置跳转效果
    transitionConfig?: (
      transitionProps: NavigationTransitionProps,
      prevTransitionProps: NavigationTransitionProps,
      isModal: boolean,
    ) => TransitionConfig; //自定义设置滑动返回的配置。具体参数可参看源码
    onTransitionStart?: () => void; //当转换动画即将开始时被调用
    onTransitionEnd?: () => void; //当转换动画完成将被调用
    headerTransitionPreset?: 'fade-in-place' | 'uikit';
    initialRouteName?: string; //设置默认的页面组件，必须是上面已注册的页面组件
    initialRouteParams?: NavigationParams; //初始路由的参数
    paths?: NavigationPathsConfig; //深度链接的路径，适用于第三方应用打开APP
    navigationOptions?: NavigationScreenConfig<NavigationStackScreenOptions>;//和NavigationRouteConfigMap里的navigationOptions一样
    containerOptions?: any; //不知道什么用处，猜测应该是配置StackNavigator一些选项
}

TabNavigator

/**
 * @routeConfigMap是一个NavigationRouteConfigMap类型的必填参数
 * @drawConfig是一个TabNavigatorConfig类型的必填参数
 */
TabNavigator(routeConfigMap,drawConfig?);

• TabNavigator的NavigationRouteConfigMap

TabNavigator的NavigationRouteConfigMap和StackNavigator的StackNavigatorConfig的数据类型相似，只是navigationOptions不同;
{ "自定义路由名称" : NavigationComponent }
或
{
    "自定义路由名称": {
        screen: NavigationComponent; //或者：getScreen: () => NavigationComponent
        path?:string; //深度链接的路径
        navigationOptions?: {
            title?: string; //标题，会同时设置导航条和标签栏的title
            tabBarIcon?:React.ReactElement<any> | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<any> | null)); //设置标签栏的图标
            tabBarLabel?:string | React.ReactElement<any> | ((options: { tintColor: (string | null), focused: boolean }) => (React.ReactElement<any> | string | null)); //设置标签栏的title
            tabBarVisible?: boolean; //是否隐藏标签栏。默认不隐藏(true)
            tabBarTestIDProps?: { testID?: string, accessibilityLabel?: string}; //tabBarTestIDProps
            tabBarOnPress?: (options: {scene: TabScene,jumpToIndex: (index: number) => void}) => void; //设置tabBar的点击事件
        }
    }
}

• TabNavigator的TabNavigatorConfig

{
    lazy?: boolean; //是否懒加载tab，默认false
    removeClippedSubviews?: boolean; //当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。这个可以提升大列表的滚动性能。
    initialLayout?: { height: number; width: number }; //初始化布局
    initialRouteName?: string; //设置默认的页面组件
    paths?: NavigationPathsConfig; //深度链接的路径，适用于第三方应用打开APP
    navigationOptions?: NavigationScreenConfig<NavigationTabScreenOptions>; ////和TabNavigator的NavigationRouteConfigMap里的navigationOptions一样
    order?: string[]; // 将它们作为真正的路由名称，而不是“string”
    backBehavior?: 'none' | 'initialRoute'; // 点击返回按钮是否导致路由器切换到初始选项卡;默认是 `initialRoute`
    tabBarComponent?: TabBarTop: React.ComponentType<TabBarTopProps> | TabBarBottom: React.ComponentType<TabBarBottomProps>;
    tabBarPosition?: 'top' | 'bottom'; //设置tabbar的位置，iOS默认在底部，安卓默认在顶部
    tabBarOptions?: {
      activeTintColor?: string; //选中状态下label的颜色
      allowFontScaling?: boolean; //是否允许字体按比例缩放
      activeBackgroundColor?: string; //选中状态下tab背景的颜色
      inactiveTintColor?: string; //未选中状态下label的颜色
      inactiveBackgroundColor?: string; //未选中状态下tab背景的颜色
      showLabel?: boolean; //是否显示label，默认true
      style?: StyleProp<ViewStyle>; //tabbar的样式
      labelStyle?: StyleProp<TextStyle>; //label的样式
      iconStyle?: StyleProp<ViewStyle>; //icon的样式
      // Top
      showIcon?: boolean; //是否显示图标，默认false
      upperCaseLabel?: boolean; //是否label大写，默认为true
      pressColor?: string; //material涟漪效果的颜色
      pressOpacity?: number; //按压标签的透明度变化
      scrollEnabled?: boolean; //是否启用可滚动选项卡
      tabStyle?: StyleProp<ViewStyle>; //tab的样式
      indicatorStyle?: StyleProp<ViewStyle>; //标签指示器的样式对象，可以将height或opacity设置为0隐藏indicator
    };
    swipeEnabled?: boolean; //是否允许在标签之间进行滑动
    animationEnabled?: boolean; //是否在更改标签时显示动画
}