react-native navigation的学习与使用

在很久之前，RN中文网说推荐用react-navigation替代navigator作为新的导航库，从RN 0.43版本开始，官方就已经停止维护Navigator了，所以强烈建议大家迁移到新的react-navigation库，而且新的导航库无论从性能还是易用性上都要大大好于老的Navigator！

附上文档地址

接下来我们看react-navigation的使用。

一 StackNavigator

1.下载和安装

在项目根目录执行：

npm install --save react-navigation

2.在js文件中引入我们需要的组件

import {StackNavigator} from ‘react-navigation‘;

3.开始使用

import Home from ‘./Home‘;
import Mains from ‘./Second‘;

[html] view plain copy

  1. <span style="font-size:24px;">const App = StackNavigator({
  2. Home: {screen: Home},
  3. Chat: {screen: Second},
  4. Two: {screen: Mains}
  5. });
  6. export default App;</span>

在index.android.js 或者index.ios.js中引入app

在StackNavigator中 把我们需要跳转的页面都加进去。

然后给每个页面设置标题

export default class Home extends React.Component {

static navigationOptions = {
        title: ‘Welcome‘,
    };

会在标题栏显示 Welcome的字样。

接下来是跳转
使用navigate()方法来执行跳转

navigate(‘Chat‘, {user:user})

前面chat为你定义的页面名字，后面｛｝内包括你要传的参数，可为空，

例如  navigate(‘Chat‘)，

代码如下：

[javascript] view plain copy

  1. <span style="font-size:24px;">    render() {
  2. const {navigate} = this.props.navigation;
  3. let user = {‘name‘: ‘zy‘, age: 18}
  4. return (
  5. <View>
  6. <Text onPress={() => navigate(‘Chat‘, {user:user})}>Home</Text>
  7. </View>
  8. )
  9. }
  10. }</span>

在Chat页面写接收参数的方法：

render() {
        const {navigate} = this.props.navigation;
        let {params} = this.props.navigation.state;
        return (
            <View>
                <Text>Second {params.user.name}</Text>
            </View>
        )
    }

这样，text组件上就会显示你传过来的参数，例如我之前传来的是name为zy的一个对象，那么这里就会显示出Second zy。

从第一个页面跳转到第二个页面的话，第二个页面会有个回退按钮，返回到前一个页面。

这个navigationOptions也可以在最开始的StackNavigator中配置：

const App = StackNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            headerTitle: ‘Home‘,   //headerTitle和title效果相同 设置导航栏标题，推荐用这个方法
headerTitleStyle: {color: ‘red‘, backgroundColor: ‘white‘, alignSelf: ‘center‘},   //标题栏文字样式 设置居中
headerStyle: {backgroundColor: ‘green‘},  //导航栏的样式
//header: null                              //隐藏导航栏
headerRight: <Text onPress={() => {
                alert(‘i am right‘);
            }
            }>right</Text>,                          //标题栏左右的按钮
headerLeft: <Text style={{marginLeft: 10}}>left</Text>,           //最好定义在组件内部
}
    },
    First: {
        screen: First,
        navigationOptions: ({navigation}) => ({
            headerTitle: ‘i am first‘,
            headerStyle: {backgroundColor: ‘green‘},  //导航栏的样式
headerTitleStyle: {color: ‘red‘, alignSelf: ‘center‘, backgroundColor: ‘white‘},
            headerLeft: <Button title={‘go back‘} onPress={() => {
                navigation.goBack();
            }}/>,
        })

    },
    Second: {
        screen: Second,
        navigationOptions: {}
    },
    Tab: {
        screen: Tab,
        navigationOptions: {
            title: ‘Tab‘,
        }
    },
});

上面在通用属性中，配置了一个右侧按钮，那么在每一个页面都会有这样一个按钮

它的属性有：

StackNavigatorConfig

路由器的选项：

  • initialRouteName - 设置堆栈的默认屏幕。必须匹配路由配置中的一个密钥。也就是已有的路由名字
  • initialRouteParams - 初始路线的参数
  • navigationOptions - 用于屏幕的默认导航选项
  • paths - 路由配置中设置的路径的覆盖映射

视觉选项：

  • mode - 定义渲染和转换的样式：

    • card - 使用标准的iOS和Android屏幕转换。这是默认值。
    • modal - 使屏幕从底部滑入，这是普通的iOS模式。只适用于iOS，对Android无影响。
  • headerMode - 指定标题应如何呈现：
    • float - 渲染一个保持在顶部的标题，并且随着画面的改变而呈现动画。这是iOS上的常见模式。
    • screen - 每个屏幕都有一个标题，标题与屏幕一起淡入淡出。这是Android上的常见模式。
    • none - 不会显示标题。
  • cardStyle - 使用此支路覆盖或扩展堆叠中单个卡的默认样式。
  • transitionConfig - 返回覆盖默认屏幕转换的对象的功能。
  • onTransitionStart - 卡转换动画即将开始时调用的功能。
  • onTransitionEnd - 卡转换动画完成后要调用的功能。

接下来看一下navigationOptions的参数：

title

串可以用作回退和headerTitletabBarLabel

header

React元素或给定的函数返回一个React元素，以显示为标题。设置隐藏标题。HeaderPropsnull

headerTitle

标题使用的字符串或React元素。默认为场景title

headerBackTitle

iOS上的后退按钮使用的标题字符串或禁用标签。默认为场景nulltitle

headerTruncatedBackTitle

当返回按钮不适合屏幕时使用的标题字符串。默认。headerBackTitle"Back"

headerRight

反应元素显示在标题的右侧

headerLeft

反应元素显示在标题的左侧

headerStyle

标题的样式对象

headerTitleStyle

标题组件的样式对象

headerBackTitleStyle

样式对象为后面的标题

headerTintColor

标题颜色

headerPressColorAndroid

颜色纹理（Android> = 5.0）

gesturesEnabled ＃

是否可以使用手势关闭此屏幕。在iOS上默认为true，在Android上为false。

二. TabNavigator

然后我们看一下另一个常用组件TabNavigator的使用，用于带有多个选项卡的屏幕，相当于android中的tab，可以来回切换。

1.引入组件

import {TabNavigator} from ‘react-navigation‘;

2.开始使用

可以给每个页面单独设置标题，切换到对应的tab会自动切换标题，也可以用从前一个页面传来的参数中的内容当标题

class Second extends React.Component {

static navigationOptions = ({navigation}) => ({
        title: ` ${navigation.state.params.user.name}`,       //前一个页面传来的对象的name属性
    })

render() {
        const {navigate} = this.props.navigation;
        let {params} = this.props.navigation.state;
        return (
            <View>
                <Text onPress={() => navigate(‘Home‘)}>Second {params.user.name}</Text>
            </View>
        )
    }
}

class Three extends React.Component {
    static navigationOptions = ({navigation}) => ({
        title: ` ${navigation.state.params.user.age}`,
    })

render() {
        const {navigate} = this.props.navigation;
        let {params} = this.props.navigation.state;
        var name = params.name;
        return (
            <View>
                <Text>three : {params.user.age}</Text>
            </View>
        )
    }
}

const MainSceen = TabNavigator({
    l1: {screen: Second},
    l2: {screen: Three}
})
export default MainSceen;

当然，这样做之后我们要把 MainSceen 这个组件添加到StackNavigator中，

像这样：

[html] view plain copy

  1. <span style="font-size:24px;">const App = StackNavigator({
  2. Home: {screen: Home},
  3. //  Chat: {screen: Second},
  4. Two: {screen: Mains}
  5. });</span>

再跳转的话直接navigate(‘Two‘)就可以，如果你不需要传递参数的话。

然后我们给标题栏添加个右边的按钮

static navigationOptions = ({navigation}) => ({
    title: ` ${navigation.state.params.user.name}`,
    headerRight:<Button title={‘标题‘}/>
})

当然你也可以换成其他组件，也可以添加点击事件等等。也可以一起配。

const MyApp = TabNavigator({
        Home: {
            screen: Home,
            navigationOptions: {  //也可以写在组件内部的static navigationOptions内
tabBarLabel: ‘首页‘,
                tabBarIcon: ({tintColor}) => (<Image source={require(‘./images/camera.png‘)}
                                                     style={{tintColor: tintColor}}/>)
            }

        },
        Notifications: {
            screen: Two,
            navigationOptions: {
                tabBarLabel: ‘2页‘,
                tabBarIcon: ({tintColor}) => (<Image source={require(‘./images/add.png‘)}
                                                     style={[{tintColor: tintColor}, styles.icon]}/>)
            }

        },
        Me: {
            screen: Three,
            navigationOptions: {
                tabBarLabel: ‘3页‘,
                tabBarIcon: ({tintColor}) => (<Image source={require(‘./images/more.png‘)}
                                                     style={{tintColor: tintColor}}/>)
            }
        }
    },
    {
        animationEnabled: false, // 切换页面时是否有动画效果
tabBarPosition: ‘bottom‘, // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: true, // 是否可以左右滑动切换tab
backBehavior: ‘none‘, // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions: {
            activeTintColor: ‘#ff8500‘, // 文字和图片选中颜色
inactiveTintColor: ‘#999‘, // 文字和图片未选中颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {
                height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
},
            style: {
                backgroundColor: ‘#fff‘, // TabBar 背景色
// height: 44
},
            labelStyle: {
                fontSize: 10, // 文字大小
},
        },
    });

3.常用属性介绍

再看一下API

API定义

TabNavigator(RouteConfigs, TabNavigatorConfig)

第一个参数RouteConfigs  ：

RouteConfigs  对象是从路由名称映射到一个路由配置，它告诉导航以呈现该路线什么，参照 StackNavigator

第二个参数：TabNavigatorConfig

  • tabBarComponent- 要用作标签栏的组件，例如 （这是iOS上的默认设置）， （这是Android上的默认设置）TabBarBottomTabBarTop
  • tabBarPosition- 标签栏的位置可以是或‘top‘‘bottom‘
  • swipeEnabled - 是否允许在标签之间进行滑动
  • animationEnabled - 是否在更改标签时进行动画处理
  • lazy - 是否根据需要懒惰呈现标签，而不是提前制作
  • tabBarOptions - 配置标签栏，如下所示。

几个选项被传递到底层路由器来修改导航逻辑：

  • initialRouteName - 第一次加载时初始标签路由的routeName
  • order - 定义选项卡顺序的routeNames数组
  • paths - 将routeName映射到路径配置，该配置将覆盖routeConfigs中设置的路径。
  • backBehavior - 后退按钮是否会使Tab键切换到初始选项卡？如果是的话，设置为，否则。默认为行为。initialRoutenoneinitialRoute

tabBarOptionsfor （iOS上的默认标签栏）TabBarBottom

  • activeTintColor - 活动标签的标签和图标颜色
  • activeBackgroundColor - 活动选项卡的背景颜色
  • inactiveTintColor - 不活动标签的标签和图标颜色
  • inactiveBackgroundColor - 非活动标签的背景颜色
  • showLabel - 是否显示标签的标签，默认为true
  • style - 标签栏的样式对象
  • labelStyle - 选项卡标签的样式对象
  • tabStyle - 标签的样式对象

例：

tabBarOptions: {
  activeTintColor: ‘#e91e63‘,
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: ‘blue‘,
  },
}

tabBarOptionsfor （Android上的默认标签栏）TabBarTop

  • activeTintColor - 活动标签的标签和图标颜色
  • inactiveTintColor - 不活动标签的标签和图标颜色
  • showIcon - 是否显示标签的图标，默认值为false
  • showLabel - 是否显示标签的标签，默认为true
  • upperCaseLabel - 是否使标签大写，默认为true
  • pressColor - 颜色纹理（Android> = 5.0）
  • pressOpacity - 按压标签的不透明度（iOS和Android <5.0 only）
  • scrollEnabled - 是否启用可滚动选项卡
  • tabStyle - 标签的样式对象
  • indicatorStyle - 标签指示器的样式对象（选项卡底部的行）
  • labelStyle - 选项卡标签的样式对象
  • iconStyle - 标签图标的样式对象
  • style - 标签栏的样式对象

例：

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: ‘blue‘,
  },
}

NavigationOptions：

title

通用标题可以用作备用和headerTitletabBarLabel

tabBarVisible

True或false显示或隐藏选项卡栏，如果未设置，则默认为true

tabBarIcon

React Element或者一个给定的函数返回一个React.Element，以在tab栏中显示{ focused: boolean, tintColor: string }

tabBarLabel

标签栏或React元素中显示的标签的标题字符串或者给定的函数返回一个React.Element，以在标签栏中显示。当未定义时，使用场景。要隐藏，请参见上一节。{ focused: boolean, tintColor: string }titletabBarOptions.showLabel

三.DrawerNavigator

用于轻松设置带抽屉导航的屏幕。有关实例，请参阅我们的展会演示。

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

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

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

  render() {
    return (
      <Button
        onPress={() => 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,
  },
});

打开和关闭抽屉，导航到并分别。‘DrawerOpen‘‘DrawerClose‘

this.props.navigation.navigate(‘DrawerOpen‘); // open drawer
this.props.navigation.navigate(‘DrawerClose‘); // close drawer

API定义

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

路由CONFIGS对象是从路由名称映射到一个路由配置，它告诉导航以呈现该路线什么，参见例如由。StackNavigator

DrawerNavigatorConfig

  • drawerWidth - 抽屉的宽度
  • drawerPosition- 选项是或。默认是位置。leftrightleft
  • contentComponent - 用于呈现抽屉内容的组件，例如导航项。接收抽屉的支柱。默认为。有关详细信息，请参阅下文。navigationDrawerItems
  • contentOptions - 配置抽屉内容，见下文。

示例：

默认是不可滚动。要实现可滚动，您必须使用该属性定制容器，如下面的示例所示。DrawerViewViewcontentComponent

{
  drawerWidth: 200,
  drawerPosition: ‘right‘,
  contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
}

几个选项被传递到底层路由器来修改导航逻辑：

  • initialRouteName - 初始路由的routeName。
  • order - 定义抽屉物品顺序的routeNames数组。
  • paths - 将routeName映射到路径配置，该配置将覆盖routeConfigs中设置的路径。
  • backBehavior - 后退按钮是否会切换到初始路线？如果是的话，设置为，否则。默认为行为。initialRoutenoneinitialRoute

提供自定义contentComponent

您可以轻松地覆盖所使用的默认组件：react-navigation

import { DrawerItems } from ‘react-navigation‘;

const CustomDrawerContentComponent = (props) => (
  <View style={style.container}>
    <DrawerItems {...props} />
  </View>
);

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

contentOptions为DrawerItems

  • items - 路由数组，可以修改或覆盖
  • activeItemKey - 标识活动路线的钥匙
  • activeTintColor - 活动标签的标签和图标颜色
  • activeBackgroundColor - 活动标签的背景颜色
  • inactiveTintColor - 无效标签的标签和图标颜色
  • inactiveBackgroundColor - 非活动标签的背景颜色
  • onItemPress(route) - 按下项目时调用的功能
  • style - 内容部分的样式对象
  • labelStyle- 当您的标签是字符串时，样式对象将覆盖内容部分中的样式Text

示例：

contentOptions: {
  activeTintColor: ‘#e91e63‘,
  style: {
    marginVertical: 0,
  }
}

屏幕导航选项

title

通用标题可以用作备用和headerTitledrawerLabel

drawerLabel

String，React元素或给定的函数返回一个React.Element，显示在抽屉侧边栏中。当不确定，现场使用{ focused: boolean, tintColor: string }title

drawerIcon

React Element或一个函数，返回一个React.Element，显示在抽屉侧边栏中{ focused: boolean, tintColor: string }

导航道具

创建的导航器组件需要以下道具：DrawerNavigator(...)

  • screenProps - 向儿童屏幕传递额外的选项，例如：
const DrawerNav = DrawerNavigator({
  // config
});

<DrawerNav
  screenProps={/* this prop will get passed to the screen components and nav options as props.screenProps */}
/>

嵌套＃DrawerNavigation

请记住，如果您嵌套DrawerNavigation，抽屉将显示在父导航下方。

引用原文：http://blog.csdn.net/u011272795/article/details/72855899

写博客是为了记住自己容易忘记的东西，另外也是对自己工作的总结，文章可以转载，无需版权。希望尽自己的努力，做到更好，大家一起努力进步！

如果有什么问题，欢迎大家一起探讨，代码如有问题，欢迎各位大神指正！

时间： 2024-08-06 22:57:36

react-native navigation的学习与使用的相关文章

Hybrid APP基础篇(二)-&gt;Native、Hybrid、React Native、Web App方案的分析比较

说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid App React Native App 分析 各大开发模式直观对比 如何选择开发模式 另类的app方案 微网页 微信小程序 其它 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app.web app与native app工具的初步比较与分析 H5.React Nati

React native采坑路

1. Running 1 of 1 custom shell scripts 卡住的问题. 分析: 四个文件没有下载完成. boost_1_63_0.tar.gz folly-2016.09.26.00.tar.gz double-conversion-1.1.5.tar.gz glog-0.3.4.tar.gz 1.下载文件 ---->这里有解决方案: http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%8

React Native 入门基础知识总结

中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看看阮一峰老师的<ECMAScript 6 入门>这篇文章.里面涉及很多 ES6 的新特性.我之前也是看了阮老师的文章做了一些学习笔记 ES6 学习笔记. 1.环境搭建 环境搭建中文教程,点击跳转RN中文社区 :http://reactnative.cn/docs/0.40/getting-star

react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content 1.安装Jdk(最好默认安装路径尽量别改) http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html http://www.jb51.net/article/36811.htm(三个环境变量都配置)  Ja

React Native 从零到高级- 0基础学习路线

React Native QQ交流群(美团,饿了么,阿里的大神都在里面):576089067 React Native  从0 基础到高级 视频教程正在重录中,要了解最新进度可以关注菜鸟窝微信公众号(下图),旧版视频教程可以点击这里在线学习 学习路线(文章版),江清清老师出品,点击这里关注江清清 ,同时可以关注一下他的课程 基础入门:1.React Native For Android环境配置以及第一个实例2.React Native开发IDE安装及配置3.React Native应用设备运行(

React Native学习笔记（一）Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程. 1.环境要求: 1) Mac OS X操作系统 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安装过程 1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本.这里下载的是node-v4.4.2.pkg版本.直接双击运行安装就可以了.查看是否安装成功可以在终端中输入如下命令: $node -v 如果能够显示版

react native新手学习之路03真机调试

React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi环境下. 打开AwesomeApp/ios/AwesomeApp/AppDelegate.m修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. eg: jsCodeLocation = [NSURL URLWithString:@"

React Native 继续学习

下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 3.通讯录 4.卡片式轮播 5.时间轴 6.图片+列表的组合效果 7.图片下拉放大 8.原生视频播放器 9.react-navigation的使用和变更 ...... 1.微信及朋友圈分享,微信支付: https://github.com/yorkie/react-native-wechat QQ分

react native 学习一(环境搭配和常见错误的解决)

react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装python2.nodejs.git.Android Studio.这里前面两个都比较好装,android studio装起来相当慢,其实应该只用装sdk就行了,安装sdk可以按http://www.androiddevtools.cn/这个里面的方式设个代理. 软件装好了,就是环境变量设置了,添加AND

React Native学习（1）：怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.