(React-Native 学习之十 ) React-navigation 的使用：

前言：React-Native 是我们移动开发中经常会接触到的开发语言。因此在发展还比较年轻的ReactNative语言开发中，我们避免不了接触一些第三方库。今天就介绍下博主在学习ReactNative中碰到的一个使用率比较高的库：react-navigation 库。

本篇文章主要记录下 react-navigation的传值，以及f方法回调。以及用的比较多的 TabNavigator，和StackNavigator 的介绍。

1，先上效果图：

介绍：

1，嵌套问题：

界面主要使用 TabNavigator 和 StackNavigator 之间的嵌套完成: 主界面是一个 StackNavigator 变量。其中嵌套了 TabNavigator Tab导航。代码如下 RouteView.js：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Image} from 'react-native';import {StackNavigator, TabNavigator, TabBarBottom} from 'react-navigation'import TopHeader from './header/TopHeader'import HomeMain from './home/HomeMain'
import HomeNearBy from '././home/HomeNearBy'
import HomeMy from '././home/HomeMy'import DetailScreen from './detail/DetailScreen'import { YellowBox } from 'react-native';/*** 主界面  * * 执行代码前  需要安装   "react-navigation": "^1.0.0-beta.19" 库: * npm install react-navigation*/
export default class RouteView extends Component{constructor(props){super(props)YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);}render(){return <App />}
}/*** 主界面 tab:*/
const Home = TabNavigator({HomeMain: {screen:HomeMain,},HomeNearBy: {screen: HomeNearBy,},HomeMy: {screen: HomeMy,}},{tabBarComponent: TabBarBottom,tabBarPosition: 'bottom',lazy: false,animationEnabled: true,swipeEnabled: true,tabBarOptions: {activeTintColor: 'red',inactiveTintColor: 'gray',},}
)//
const App = StackNavigator({Home:{screen:Home,// navigationOptions: { headerTitle:'niho'}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. },DetailScreen: { screen: DetailScreen }, //详情界面}
);

2,跳转和传值问题：

主界面HomeMain.js 导航中有一个跳转按钮，点击跳转到下一页。

跳转方法以及传参数：

 onRightPress(){this.props.navigation.navigate('DetailScreen',//传递给下个界面的参数    {user:'我是主界面传递的参数',//回调函数：callBack:(random)=>{alert('主界面数据已经改变')this.setState({mainInfo: '数据已经改变' +':'+ random})}})}

详情界面接收方法以及回调主界面方法：

render(){return(<View style={{flex:1,backgroundColor:'#ddf',justifyContent:'center',flexDirection:'column'}}><Text style={{alignSelf:'center',fontSize:20,color:'#00f',marginBottom:50}}//接收传过来的参数值>{this.props.navigation.state.params.user}    </Text><Button style={{alignSelf:'center',fontSize:20,color:'#fff'}} title = {'点击回调改变主界面数据'}onPress = {this.props.navigation.state.params.callBack.bind(this,Math.random()*100)}  //回调主界面 callback 方法  改变主界面数据 /></View>)}

3,navigationOptions 中点击事件的处理：

navigation中右侧点击事件处理

//点击事件的处理：  1，设置参数  bind到当前对象componentDidMount(){//在初始化render之后只执行一次，在这个方法内，可以访问任何组件，//componentDidMount()方法中的子组件在父组件之前执行this.props.navigation.setParams({onRightPress:this.onRightPress.bind(this)})}static navigationOptions =({navigation, screenProps}) =>( {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)// header: () => (<TopHeader/>), // 可以指定自定义的头部导航组件：headerTitle:'主页',headerRight:(<View style={{paddingRight:10}}><Buttonstyle={{backgroundColor:'#3dd'}}title={'下一页'}//点击事件的处理：  2，获取方法对象   处理事件onPress={()=>navigation.state.params.onRightPress()}/></View>),tabBarLabel: '主页',tabBarIcon: ({ tintColor, focused }) => (<Image resizeMode='contain' style={{width:25,height:25}}source={require('../imgs/tabbar_homepage.png')}/>)})/*** 点击事件的处理： 3， 处理事件*/onRightPress(){this.props.navigation.navigate('DetailScreen',//传递给下个界面的参数    {user:'我是主界面传递的参数',//回调函数：callBack:(random)=>{alert('主界面数据已经改变')this.setState({mainInfo: '数据已经改变' +':'+ random})}})}

代码地址：欢迎fork和star：
https://github.com/zqHero/reactNavigationDemo

(React-Native 学习之十 ) React-navigation 的使用：相关推荐

React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
React Native学习资源汇总
目前主流的移动跨平台技术方案大体可以分为三类,一类是使用原生内置浏览器加载HTML5的Hybrid技术方案,采用此种方案的主要有Cordova.Ionic和微信小程序:另一类是使用JavaScript ...
React Native学习提纲
React Native学习提纲当前版本最后修订日期: 2015年10月21日一. React.js入门基础 1.基础HTML/CSS与基础开发工具使用 - html基础 doctype.常用标签 ...
利用 Create React Native App 快速创建 React Native 应用
React Native App简介打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...
React Native学习速记
学习路线建议:ES5/6 -> React -> React Native -> Redux + React-Navigation等 ES5 :https://wangdoc.co ...
React Native学习总结第一天
1.0 配置React Native的开发环境请参考虽然过程很复杂,但是确实没啥难度(react-native init testProject) 2.0 ES6的基础语法变量和常量声明 let ...
iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...
react native学习笔记29——动画篇 Animated高级动画
1.前言上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...
React Native学习-第一篇
记录学习react native中碰到的问题. 操作系统:OS X EI Capitan 10.11.1 =============================================== ...