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; //是否在更改标签时显示动画
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容