先写下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; //是否在更改标签时显示动画
}
