react-native之react-navigation使用总结

前言

界面Tab导航，跳转以及title的显示效果是一款优秀APP非常重要的一部分，门面要做好，才会带来好的用户体验。

---

目录

• 安装
• 使用介绍
  

  ---

安装

npm安装

npm install --save react-navigation

yarn安装

yarn add react-navigation

使用介绍

1.navigation有三个默认的navigators：

• StackNavigator: 用来实现界面间的切换， 新的界面置于栈顶。
• TabNavigator：实现Tab菜单功能。
• DrawerNavigator： 实现抽屉菜单的效果。

2.具体使用

StackNavigator使用：

1.创建StackNavigator

import Tab from './MainTab';

/**
 * 应用根路由
 */
export const RootNavigator = StackNavigator({
    Tab: {screen: Tab},
}, {
    initialRouteName: 'Tab',
    mode: 'card',
    headerMode: 'screen',
    navigationOptions: () => ({
        headerBackTitle: null,
        headerTintColor: theme.NAVBAR_TITLE_COLOR,
        headerStyle: {
            backgroundColor: theme.NAVBAR_BG_COLOR,
            borderBottomWidth: 0,
            elevation: 0,
        },
    })
});

export default class AppWithNavigationState extends Component {
    render() {
        return (
            this.props.dispatch,
                state: this.props.nav
            })} />
        )
    }
}

2.API 定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs配置：

 Tab: {screen: Tab},第一个Tab是定义的路由名字，第二个是引入的组件。使用this.props.navigation.navigate('路由名')，就可以实现跳转;

StackNavigatorConfig配置：

路由相关配置：

1. initialRouteName：默认的初始要跳转的界面，必须匹配一个已经配置的路由，否则报错。
2. initialRouteParams： 初始化路由参数。
3. navigationOptions： 默认的navifation选项，下面有详细总结。
4. paths：路由路径的配置设置。

可视化选项：

1. mode: 定义显示和界面切换风格
   a. card - Android 和 iOS 标准模式。默认此模式。
   b. modal - IOS界面从底部滑动显示，Android不支持此属性
2. headerMode：定义header如何渲染
   a. float: header漂浮在界面之上，界面切换有个透明度的改变，不会固定在界面上跟着界面走。这个是iOS上常见的模式。
   b.screen：header吸附在界面上，随着界面的移动而移动，这个是Android上面常用模式。
   c.none：不渲染头。
3. cardStyle：对单个的card的风格进行定义。
4. transitionConfig： 界面切换配置。
   a.transitionProps： 新界面切换属性配置。
   b.prevTransitionProps: 关闭界面属性配置。
   c.isModal: 布尔值，是否指定以modal的形式切换界面。
5. onTransitionStart: 开始切换时的回调。
6. onTransitionEnd： 结束切换时回调。

Navigation Options配置：

1. title： 界面标题。
2. header： 界面的头布局，设置为null则隐藏header。
3. headerTitle： 界面title, 当他是一个组件时，可以接收allowFontScaling, style 和 children属性。
4. headerTitleAllowFontScaling： 布尔值，是否允许头字体支持缩放，默认为true。
5. headerBackTitle： 返回title.iOS 11使用。
6. headerTruncatedBackTitle：返回，headerBackTitle不适用时使用。
7. headerRight： 显示在header右侧。
8. headerLeft： 显示在header左侧。
9. headerStyle： header的style对象。
10. headerTitleStyle： title组件对象。
11. headerBackTitleStyle：backtitle的style对象。
12. headerTintColor： header的颜色。
13. headerPressColorAndroid： Android >= 5.0 材质化设计点击涟漪效果。
14. gesturesEnabled: 布尔值，是否支持手势关闭屏幕，iOS 默认为true，Android默认为false。
15. gestureResponseDistance： 手势响应的距离。
    a.horizontal - 水平的距离，默认25。
    b.vertical - 垂直的距离， 默认135。
16. gestureDirection：重新定义手势方向，默认正常的方向。
17. Navigator Props： Navigator属性。

 render() {
        return (
            .props.dispatch,
                state: this.props.nav
            })} />
        )
    }

RootNavigator是StackNavigater组件，navigation是其属性，这样我们就可以在子组件中通过this.props.navigation取到navigation属性。

TabNavigator使用：

1.创建TabNavigator

/**
 * 首页导航
 * @type {Object}
 */
export default TabNavigator({
    Home: {screen: Home},
    StationPage: {screen: StationPage},
    MessagePage: {screen: MessagePage},
    AccountPage: {screen: AccountPage},
}, {
    initialRouteName: 'StationPage',
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    navigationOptions: {
        gesturesEnabled: false,
        headerBackTitle: null,
    },
    tabBarOptions: {
        showIcon: true,
        activeTintColor: theme.TAB_TINT_COLOR_ACTIVE,
        inactiveTintColor: theme.TAB_TINT_COLOR,
        indicatorStyle: {height: 0},
        style: {
            backgroundColor: '#efefef',
            height: px(100),
            paddingTop: 0,
        },
        labelStyle: {
            fontSize: px(24),
            marginTop: 0,
            paddingTop: 0,
        },
    }
});

2.API 定义

TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs配置：

它是一个从路由名字到路由配置的映射。使用类似StackNavigator。

TabNavigatorConfig配置：

1. tabBarComponent： Tab bar组件，iOS 默认在下面，Android 默认在上面。
2. tabBarPosition： Tab bar 的位置，“top” 或者 “bottom”。
3. swipeEnabled：是否允许tab之间进行切换。
4. animationEnabled： 是否允许切换时执行动画。
5. configureTransition： 配置tab之间切换动画。
6. lazy： 控制懒加载机制，是否需要提前加载。
7. initialLayout： 初始的布局，包含宽高，可已预防加载迟钝。
8. tabBarOptions： tabBar的一些样式选项。下面有总结。
9. initialRouteName： 第一个加载的路由名。
10. order： 对加载路由进行排序。
11. paths：名字到路由配置的映射，对路由配置进行设置。
12. backBehavior: 点击返回键，是否切换到initialRoute。

tabBarOptions配置：

1. activeTintColor： 选中tab的图标和标签的颜色。
2. activeBackgroundColor: 选中Tab的背景颜色。(IOS)
3. inactiveTintColor： 未被选中Tab的图标和标签的颜色。
4. inactiveBackgroundColor： 未被选中的Tab的背景颜色。(IOS)
5. showLabel：是否显示对应Tab的标签，默认显示。
6. style： Tab bar的样式。
7. labelStyle：Tab标签的样式。
8. tabStyle: Tab的样式。
9. allowFontScaling： 标签字体是否允许缩放。默认true。
10. showIcon：是否显示图片。默认不显示。（Android）
11. upperCaseLabel: 是否标签大写。默认true。(Android)
12. pressColor: 点击颜色。（Android >= 5.0 涟漪效果）
13. pressOpacity：透明度改变。（iOS and Android < 5.0 only）
14. scrollEnabled: 是否Tab能够滑动。（Android）
15. indicatorStyle： Tab 底端指示器风格。（Android）
16. iconStyle: Tab Icon对象样式。（Android）

Navigation Options 配置：

1. title： 标题。
2. tabBarVisible： 布尔值，tabBar是否可见。
3. swipeEnabled： 布尔值，是否允许在标签之间进行滑动。
4. tabBarIcon： tabBar图片icon。
5. tabBarLabel：同tabBarOptions.showLabel。
6. tabBarOnPress： 点击tabBar触发。
   a.previousScene: { route, index } : 离开时的界面。
   b.scene: { route, index } ： 点击的路由，索引。
   c.jumpToIndex： 在切换到下一个界面之前，可以在此方法中处理一些自定义的逻辑。

Navigator Props配置： 同上。

DrawerNavigator使用：

1.创建DrawerNavigator(官方的例子):

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
       this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
       this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

2.API定义：

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs配置：

同StackNavigator配置。

DrawerNavigatorConfig配置

1. drawerWidth： 抽屉的宽度或者是函数返回值。
2. drawerPosition： 抽屉的位置，left左侧，right右侧。
3. contentComponent： 用来渲染抽屉内容的组件。下面详解。
4. contentOptions: 配置抽屉的内容。下面详解。
5. useNativeAnimations： 使用本地动画。默认true。
6. drawerBackgroundColor：抽屉的背景颜色。默认白色。
7. initialRouteName： 初始化路由名。
8. order。抽屉item显示的顺序。
9. paths：路由名字到配置的映射。
10. backBehavior： 返回按钮是否返回初始路由。yes到初始路由，否则none。

自定义contentcomponent:

import { DrawerItems, SafeAreaView } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    SafeAreaView>
  ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

contentOptions配置：

1. items： 可以修改或者重写路由。
2. activeItemKey： 激活路由对应的key。
3. activeTintColor： 选中标签对应的标签和icon的颜色。
4. activeBackgroundColor： 选中标签对应的颜色。
5. inactiveTintColor：未选中对应的标签和icon对应的颜色。
6. inactiveBackgroundColor：未选中对应的北京颜色。
7. onItemPress(route)： 当item被点击时，调用的函数。
8. itemsContainerStyle：对应section部分的样式。
9. itemStyle： 对应item的样式。
10. labelStyle： 对应label的样式。
11. iconContainerStyle：重写view的icon Container样式。

Navigation Options配置：

1. title： 标题。
2. drawerLabel： 字符串，组件或者函数。标签显示在侧边栏，没有定义title代替。
3. drawerIcon：组件或者函数。图片显示在侧边栏。

4. drawerLockMode： 指定抽屉的锁模式。
   a. unlocked: 默认。响应手势的触摸开关。
   b. locked-closed：抽屉保持关闭的状态，不响应手势。
   c. locked-open： 抽屉一直开着，不响应手势。

   Navigator Props配置：

   同StackNavigator。