react-navigation navbar使用

Posted on

  1. 安装 $npm install –save react-navigation

    ​ $npm install –save react-navigation-stack

  2. 在App.js引入插件

    1
    import { createStackNavigator } from 'react-navigation-stack';

  3. 在App.js注册导航 

    1
    const RootNavigator = createStackNavigator(RouteConfig, StackNavigatorConfig);

    设置配置文件: 创建两个文件 RouteConfig.js StackNavigatorConfig.js

    在App.js 引入

    1
    2
    import RouteConig from './RouteConfig.js';
    import StackNavigatorConfig from './StackNavigatorConfig.js';

  4. RouteConfig.js

    — 路由配置 —

    * 所有组件都必须在这里注册

    * 在这里设置的navigationOptions的权限 > 对应页面里面的 static navigationOptions的设置 > StackNavigator()第二个参数里navigationOptions的设置

    * 该配置文件会在App.js里的StackNavigator(导航组件)里使用。

    navigationOptions

  • title：导航栏的标题，或者Tab标题 tabBarLabel

  • header：自定义的头部组件，使用该属性后系统的头部组件会消失，如果想在页面中自定义，可以设置为null，这样就不会出现页面中留有一个高度为64navigationBar的高度

  • headerTitle：头部的标题，即页面的标题

  • headerBackTitle：返回标题，默认为 title的标题

  • headerTruncatedBackTitle：返回标题不能显示时（比如返回标题太长了）显示此标题，默认为’Back’

  • headerRight：头部右边组件

  • headerLeft：头部左边组件

  • headerStyle：头部组件的样式

  • headerTitleStyle：头部标题的样式

  • headerBackTitleStyle：头部返回标题的样式

  • headerTintColor：头部颜色

  • headerPressColorAndroid：Android 5.0 以上MD风格的波纹颜色

  • gesturesEnabled：否能侧滑返回，iOS 默认 true ， Android 默认 false

    示例：

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
/*导入视图*/
import MainTab from './TabNavigator'
import NewsDetail from './pages/subPages/NewsDetail'
import VideoDetail from './pages/subPages/VideoDetail'
import NewsSearch from './pages/subPages/NewsSearch'

const RouteConfig = { 
    MainTab: {
        screen:MainTab,
        //navigationOptions: ({navigation}) => ({header: null})
    },  
   // 下面三个页面我需要隐藏导航栏
    NewsDetail: {
        screen: NewsDetail,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    },  
    VideoDetail: {
        screen: VideoDetail,
        navigationOptions: ({navigation}) => ({
          title: navigation.state.params ? navigation.state.params.title : '职位详情',
          header:null, 
          gesturesEnable:true
        })
    },  
    NewsSearch: {
        screen: NewsSearch,
        navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})
    }   
}

export default RouteConfig;
  1. StackNavigatorConfig.js

  • initialRouteName：导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面

  • initialRouteParams：给初始路由的参数，在初始显示的页面中可以通过this.props.navigation.state.params来获取

  • navigationOptions：路由页面的全局配置项

  • paths：RouteConfigs里面路径设置的映射

  • mode：页面跳转方式，有card和modal两种，默认为 card

    • card：普通app常用的左右切换
    • modal：只针对iOS平台，类似于iOS中的模态跳转，上下切换

  • headerMode：页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种

    • float：渐变，类似iOS的原生效果，无透明，默认方式
    • screen：标题与屏幕一起淡入淡出，如微信QQ的一样
    • none：没有动画

  • cardStyle：为各个页面设置统一的样式，比如背景色，字体大小等

  • transitionConfig：配置页面跳转的动画，覆盖默认的动画效果

  • onTransitionStart：页面跳转动画即将开始时调用

  • onTransitionEnd：页面跳转动画一旦完成会马上调用

    示例：

    1
    2
    3
    4
    5
    6
    7
    8
    import StackViewStyleInterpolator from "react-navigation-stack";

    const StackNavigationConfig = { 
        initialRouteName: 'MainTab',
        headerMode: 'float'
    }

    export default StackNavigationConfig;

优化：

建一个navigator.js 在setup.js中引用 页面中是不引用的 就不会有circle

参考官方文档：https://www.reactnavigation.org.cn/docs/guide-quick-start