react-navigation部分属性介绍

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 1.6k 阅读时长 ≈ 6 分钟

React-Navigation

  • npm or yarn install React-navigation
1
2
npm install react-navigation --save   or
yarn add  react-navigation
  • 使用 react-navigation 必须创建导航器，react-navigation 自带三种导航器
    • StackNavigator - 为您的应用程序在每个新屏幕放置在堆栈之上的屏幕之间进行切换
    • TabNavigator -用于设置多个选项卡的屏幕(tab)
    • DrawerNavigator -用于设置带抽屉导航的屏幕

页面使用时创建一个 StackNavigator ，最常见的底部切换

StackNavigatorConfig 说明

路由器的选项

  • initialRouteName：设置堆栈的默认屏幕。必须匹配路由配置中的一个键。
  • initialRouteParams：初始路线的参数
  • navigationOptions：用于屏幕的默认导航选项
  • paths：覆盖路由配置中设置的路径的映射

视觉选项

  • mode：定义渲染和转换的风格：
  • card：使用标准的 iOS 和 Android 屏幕转换。这是默认的。
  • modal：使屏幕从底部滑入，这是一种常见的 iOS 模式。只适用于 iOS，对 Android 没有任何影响。
  • headerMode：指定如何呈现标题：
    • float：在屏幕更改时渲染保留在顶部的单个标题和动画。这是 iOS 上的常见模式。
    • screen：每个屏幕都有一个标题，标题与屏幕一起淡入淡出。这是 Android 上的常见模式。
    • none：没有标题将被渲染。
  • cardStyle：使用这个道具覆盖或扩展堆栈中单个卡的默认样式。
  • transitionConfig：返回与默认屏幕转换合并的对象的函数（查看类型定义中的 TransitionConfig ）。提供的函数将传递以下参数：
    • transitionProps：新屏幕的过渡道具。
    • prevTransitionProps：过渡屏幕的道具。
    • isModal：指定屏幕是模态的布尔值。
    • onTransitionStart：卡转换动画即将开始时调用的函数。
    • onTransitionEnd：卡转换动画完成后调用的函数。

Screen navigationOptions 屏幕导航参数说明

  • title：可以用作回退的字符串。此外，将用作（如果嵌套在 TabNavigator 中）或（如果嵌套在 DrawerNavigator 中）
    • headerTitle
    • tabBarLabel
    • drawerLabel
  • header：React 元素或给定的函数返回 React 元素，显示为标题。设置为隐藏标题。Header：null
  • headerTitle：字符串，React 元素或 React 组件使用的标题。默认为上一级组件的名称。
  • headerTitleAllowFontScaling：标题标题字体是否应缩放以尊重文本大小可访问性设置。默认为 true。
  • headerBackTitle：iOS 上后退按钮使用的标题字符串，或禁用标签。默认为前一个场景的名称。隐藏设置为 null
  • headerTruncatedBackTitle：后退按钮使用的标题字符串不适合屏幕时。默认。headerBackTitle 是”Back”
  • headerRight:React 元素显示在标题的右侧。
  • headerLeft：React 元素或组件显示在标题的左侧。当使用的成分。
  • headerStyle：标题的样式 obj
  • headerTitleStyle：标题组件的样式 obj
  • headerBackTitleStyle：组件返回字体标题的样式 obj
  • headerTintColor：头部的颜色
  • headerPressColorAndroid：材质纹波的颜色（仅适用于 Android> = 5.0）
  • gesturesEnabled：是否可以使用手势来消除此屏幕。在 iOS 上默认为 true，在 Android 上为 false。
  • gestureResponseDistance：对象覆盖从屏幕边缘开始触摸的距离，以识别手势。它具有以下属性：
    • horizontal- 数字 - 水平方向的距离。默认为 25。
    • vertical- 数字 - 垂直方向的距离。默认为 135。
  • gestureDirection：string 来覆盖关闭手势的方向。正常行为或从右向左滑动。default、inverted

页面使用 TabNavigator 标签栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**TabNavigator */
import { TabNavigator, TabBarBottom, TabBarTop } from "react-navigation";

const tabRouteConfigs = {
  Home: {
    screen: HomeTab,
    navigationOptions: ({ navigation }) => ({
      // 参数参考上面例子
    }),
  },

  Car: {
    screen: CarTab,
    navigationOptions: ({ navigation }) => ({
      // 参数参考上面例子
    }),
  },

  Profile: {
    screen: ProfileTab,
    navigationOptions: ({ navigation }) => ({
      // 参数参考上面例子
    }),
  },
};

const tabNavigatorConfig = {
  tabBarPosition: "bottom",
  swipeEnabled: true,
  animationEnabled: false,
  lazy: true,
  initialRouteName: "Profile",
  order: ["Profile", "Home", "Car"],
  backBehavior: "none",
  tabBarOptions: {
    //参数参考上面例子
  },
};

const Tab = TabNavigator(tabRouteConfigs, tabNavigatorConfig);

export default class Tabs extends Component {
  render() {
    return <Tab />;
  }
}

页面使用 DrawerNavigator 抽屉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
const drawerRouteConfigs = {
  // 该参数参照StackNavigator  RouteConfigs的设置
  scr1: {
    screen: scr1,
    navigationOptions: () => ({
      // 参照上面StackNavigator  RouteConfigs的设置
    }),
  },

  scr2: {
    screen: scr2,
    navigationOptions: () => ({
      // 参照上面StackNavigator  RouteConfigs的设置
    }),
  },

  scr3: {
    screen: scr3,
    navigationOptions: () => ({
      // 参照上面StackNavigator  RouteConfigs的设置
    }),
  },
};

const drawerNavigatorConfig = {
  // 配置抽屉内容
  contentOptions: {
    // 活动标签的标签和图标颜色
    activeTintColor: "blue",

    // 活动标签的背景颜色
    activeBackgroundColor: "#f2f2f2",

    // 非活动标签的标签和图标颜色
    inactiveTintColor: "#fff",

    // 不活动标签的背景颜色
    inactiveBackgroundColor: "rgba(0,0,0,0)",

    // // 按下某个项目时调用的函数
    // onItemPress: (route) => {
    //   console.log(route)
    // },

    // 内容部分的样式对象
    itemsContainerStyle: {},

    // 单个项目的样式对象，可以包含一个图标和/或一个标签
    itemStyle: {},

    // 当你的标签是一个字符串时，样式对象覆盖内容部分的样式Text
    labelStyle: {},

    // 样式对象覆盖图标容器样式。View
    iconContainerStyle: {},
  },
  // // 抽屉内容组件
  contentComponent: CustomDrawerContentComponent,

  // // 抽屉的宽度或返回它的函数
  // drawerWidth: Dimensions.get('window').width - 80,

  // // 抽屉显示的位置
  // drawerPosition: 'left',

  // // 启用本地动画。默认是。true
  // useNativeAnimations: true,

  // // 使用抽屉背景的某种颜色。默认是。white
  // drawerBackgroundColor: '#fff',

  // // 设置堆栈的默认屏幕。必须匹配路由配置中的一个键
  // //  initialRouteName: 'Home',

  // // 当Android点击返回键的时候，做的处理，initialRoute返回到初始化的界面，none退出应用
  // backBehavior: 'none',

  // // 定义选项卡顺序的routeNames数组。 默认可不写
  // // order: ['Home', 'Contact', 'Dynamic',],
};

const drawer = DrawerNavigator(drawerRouteConfigs, drawerNavigatorConfig);

export const AppNavigation = StackNavigator(
  {
    Main: {
      screen: drawer,
      path: "/",
      navigationOptions: ({ navigation }) => ({
        header: null,
      }),
    },

    //screen
    // ...MyOtherRoutes,
  },
  stackNavigatorConfig
);

  • 在 StackNavigator 中注册后的组件都有 navigation 这个属性.navigation 又有 5 个参数:navigate,goBack,state,setParams,dispatch,可以在组件下 console.log 一下 this.props 就能看到

  • this.props.navigation.navigate(‘routeName’, {params:params}, action): push 下一个页面

    • routeName: 注册过的目标路由名称 string
    • params: 传递的参数 props
    • action: 集成 redux dispatch 一个 action

  • this.props.navigation.goBack(): 返回上一页

  • this.props.navigation.state:每个界面通过这去访问它的 router，state 其中包括了：

    • routeName: 路由名
    • key: 路由身份标识
    • params: props 参数

  • this.props.navigation.setParams: 该方法允许界面更改 router 中的参数，可以用来动态的更改导航栏的内容

  • this.props.navigation.dispatch: 可以 dispatch 一些 action，主要支持的 action 有：

    • Navigate:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import { NavigationActions } from "react-navigation";

    const navigationAction = NavigationActions.navigate({
      routeName: "Profile",
      params: {},

      // navigate can have a nested navigate action that will be run inside the child router
      action: NavigationActions.navigate({ routeName: "SubProfileRoute" }),
    });

    this.props.navigation.dispatch(navigationAction);
    • SetParams:为指定的 router 更新参数，该参数必须是已经存在于 router 的 param 中
    1
    2
    3
    4
    5
    6
    7
    8
    import { NavigationActions } from "react-navigation";

    const setParamsAction = NavigationActions.setParams({
      params: {}, // these are the new params that will be merged into the existing route params
      // The key of the route that should get the new params
      key: "screen-123",
    });
    this.props.navigation.dispatch(setParamsAction);
    • Reset:Reset 方法会清除原来的路由记录，添加上新设置的路由信息, 可以指定多个 action，index 是指定默认显示的那个路由页面
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { NavigationActions } from "react-navigation";

    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: "Profile" }),
        NavigationActions.navigate({ routeName: "Two" }),
      ],
    });
    this.props.navigation.dispatch(resetAction);