前言:官方文档已经看了一遍,但印象不是很深,于是在mooc上找了个实战学习项目做一做。

本篇目录:


基础导航练习√

1.ReactNavigation之createStackNavigator导航器案例练习

相关资料:

练习链接:http://www.devio.org/2018/12/24/createStackNavigator/

React Navigationan官网:https://reactnavigation.org/docs/zh-Hans/getting-started.html

1. 初始化react native项目

react-native init react_navigation_demo

2. 在项目目录下安装reactnavigation这个包

yarn add react-navigation

3. 安装依赖

yarn add react-native-reanimated react-native-gesture-handler react-native-screens

4. 版本更新后,此步骤忽略。

5. 新建并配置路由文件navigator/navigators.js

6. 新建页面文件夹Page,构建HomePage.js,Page1.js,Page2.js,Page3.js,Page4.js,Page5.js等页面

HomePage.js

import React,{Component} from 'react';
import {Button ,View,Text,StyleSheet} from 'react-native'; export default class HomePage extends Component{
render(){
const {navigation}=this.props; //获取navigation
return(
<View style={styles.container}>
<Text style={styles.welcome}>Welcome To HomePage</Text>
<Button title={'Go to Page1'} onPress={()=>{
navigation.navigate('Page1',{name:'动态的'});//跳转页面,并且允许传递参数
}} />
<Button title={'Go to Page2'} onPress={()=>{
navigation.navigate('Page2');
}} />
<Button title={'Go to Page3'} onPress={()=>{
navigation.navigate('Page3',{name:'动态的'});
}} />
</View>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
}
});

Page1.js

import React from 'react';
import {Button,View,Text,StyleSheet} from 'react-native'; export default class Page1 extends React.Component{
render(){
const {navigation}=this.props;
return(
<View style={styles.container}>
<Text style={styles.welcome}>Welcome To Page1</Text>
<Button
title={'Go Back'}
onPress={()=>{
navigation.goBack();
}}
/>
<Button
title={'Go TO Page4'}
onPress={()=>{
navigation.navigate('Page4');
}}
/>
</View>
)
}
} const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
}
});

Page2.js

import React from 'react';
import {View,Text,StyleSheet} from 'react-native'; export default class Page2 extends React.Component{
render(){
const {navigation}=this.props;
return(
<View style={styles.container}>
<Text style={styles.welcome}>Welcome To Page2</Text>
</View>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
}
});

7. 修改根目录下的APP.js,将路由导入

import React from 'react';
import AppContainer from './navigation/navigators.js'//导入路由文件 export default class App extends React.Component {
render() {
return <AppContainer />;
}
}

8. 启动连接虚拟手机,用react-native run-android编译运行代码

2.ReactNavigation之createBottomTabNavigator和createMaterialTopTabNavigator导航器案例练习

·导入createBottomTabNavigator和createMaterialTopTabNavigator导航器及矢量图标库

import {createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation-tabs';//底部导航及头部导航器
import Ionicons from 'react-native-vector-icons/Ionicons';//矢量图标库
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';//矢量图标库

·编写代码

const AppBottomNavigator =createBottomTabNavigator({
Page1:{
screen:Page1,
navigationOptions:{
tabBarLabel:'最热',
tabBarIcon:({tinColor,focused})=>(
<Ionicons
name={"ios-home"}
size={26}
style={{color:tinColor}}
/>
) } },
Page2:{
screen:Page2,
navigationOptions:{
tabBarLabel:'趋势',
tabBarIcon:({tinColor,focused})=>(
<Ionicons
name={"ios-people"}
size={26}
style={{color:tinColor}}
/>
)
} },
Page3:{
screen:Page3,
navigationOptions:{
tabBarLabel:'收藏',
tabBarIcon:({tinColor,focused})=>(
<Ionicons
name={"ios-chatboxes"}
size={26}
style={{color:tinColor}}
/>
)
} },
Page4:{
screen:Page4,
navigationOptions:{
tabBarLabel:'我的',
tabBarIcon:({tinColor,focused})=>(
<Ionicons
name={"ios-car"}
size={26}
style={{color:tinColor}}
/>
)
} }, },{
tabBarOptions:{
activeTintColor:Platform.OS==='ios'?'#e91e63':'fff',
}
}); const AppTopNavigator =createMaterialTopTabNavigator({
Page1:{
screen:Page1,
navigationOptions:{
tabBarLabel:'ALL'//顶部导航项
} },
Page2:{
screen:Page2,
navigationOptions:{
tabBarLabel:'IOS'//顶部导航项
} },
Page3:{
screen:Page3,
navigationOptions:{
tabBarLabel:'React'//顶部导航项
} },
Page4:{
screen:Page4,
navigationOptions:{
tabBarLabel:'React Native'//顶部导航项
} },
Page5:{
screen:Page5,
navigationOptions:{
tabBarLabel:'TI实验室'//顶部导航项
} },
},{
tabBarOptions:{
tabStyle:{minWidth:50,},//顶部导航项的最小宽
upperCaseLabel:false,//是否使标签大写,默认为true
scrollEnabled:true,//允许滑动切换标签
style:{
backgroundColor:"#678" //TabBar的背景色 },
indicatorStyle:{
height:2,
backgroundColor:"white",
},//标签指示器样式
labelStyle:{
fontSize:13,
marginTop:6,
marginBottom:6,
},//文字样式
}
});

演示效果:

      

3.ReactNavigation之createDrawerNavigator导航器案例练习(!存在bug)

·导入createDrawerNavigator导航器

编写代码

const AppDrawerNavigator=createDrawerNavigator({
Page4:{
screen:Page4,
navigationOptions:{
drawerLabel:"Page4",
drawerIcon:({tintColor})=>(
<MaterialIcons
name={'drafts'}
size={24}
style={tintColor}
/>
)
}
},
Page5:{
screen:Page5,
navigationOptions:{
drawerLabel:"Page5",
drawerIcon:({tintColor})=>(
<MaterialIcons
name={'move-to-inbox'}
size={24}
style={tintColor}
/>
)
}
},
},{
initialRouteName:'Page4',
contentOptions:{
activeTintColor:'#e91e63'
},
contentComponent:(props)=>(
<ScrollView
style={{backgroundColor:'#789',flex:1}}
>
<SafeAreaView
forceInset={{top:'always',horizontal:'never'}} >
<DrawerItems {...props}/>
</SafeAreaView>
</ScrollView>
)
});//存在问题,需要后期调整

4.ReactNavigation之createSwitchNavigator导航器案例练习

·该导航器主要与登录验证有关,在后面的章节会具体介绍。

React-Native实战项目-导航器篇(一)的更多相关文章

  1. 0、手把手教React Native实战之开山篇

    ##作者简介 东方耀    Android开发   RN技术   facebook   github     android ios  原生开发   react reactjs nodejs 前端   ...

  2. 手把手教你React Native 实战之开山篇《一》

    先说一下我为什么学习RN 18年3月29号,随着自己内心的欲望和冲动,任务交接了一下,正式离开一家医疗公司.第二天就入职了这之前已经找好的公司,由于自己对代码浓厚的热情,自己终于也不再带团队.正好有充 ...

  3. React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发

    React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  1 ...

  4. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

  5. React Native开源项目案例

    (六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/Rea ...

  6. React Native 开源项目汇总

    最近闲来无事,学习了React Native开发Android APP,自我感觉RN APP的效果和Native APP比还是蛮不错,以下是找到的一些优秀源码,仅供学习参考... React Nati ...

  7. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  8. React Native之使用导航器跳转页面(react-navigation)

    react-navigation是一个导航库,要使用react-navigation来实现跳转页面,首先得在项目中安装此库,由于Yarn是Facebook提供的替代npm的工具,可以加速node模块的 ...

  9. 【React Native 实战】商品分类

    1.前言 商品分类是各种app常见的一种操作,一般都是左右两栏构成,左边栏是商品的分类,右边栏是商品的展示,同时左右两栏都可以滑动.今天我们就用React Native来实现这种效果. 实现内容:1) ...

随机推荐

  1. idea模块搭建新手党常见错误

    一.搭建java和web模块会出现的错误(此篇以分布式模块为例) 1.创建空工程 1.点击file ,在弹出的窗口左侧选项中在最后有一个Empty Project选项.此处就是创建空工程. 2.在此空 ...

  2. Django 项目环境搭建

    环境 mkvirtualenv -p python3.6 mytest # 创建虚拟环境 workon mytest # 进入虚拟环境 # 按照基础环境依赖 pip install django==1 ...

  3. spark- PySparkSQL之PySpark解析Json集合数据

    PySparkSQL之PySpark解析Json集合数据 数据样本 12341234123412342|asefr-3423|[{"}] 正菜: #-*- coding:utf-8 –*- ...

  4. HTML基础iframe 实现聚合浏览器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. ThreadPoolTaskExecutor使用详解

    当我们需要实现并发.异步等操作时,通常都会使用到ThreadPoolTaskExecutor,现对其使用稍作总结. 配置ThreadPoolTaskExecutor通常通过XML方式配置,或者通过Ex ...

  6. jQuery-Ajax请求Json数据并加载在前端页面,附视频教程讲解!

    Ajax技术应用广泛,这种异步加载技术,无需刷新网页即可更新网站内容,全局或者局部均可,所以大家应该学会这种技巧,把技术用上来. 创建demo.json文件,用来做数据源: {     "t ...

  7. 大数据之hadoop框架知识

    https://blog.csdn.net/zytbft/article/details/79285500

  8. Linux重定向命令(stdout, stdin, stderr)

    ls -l /usr/bin > ls-output.txt 将输出结果重定向到 ls-output.txt 文件.注意:再次使用> ls-output.txt会默认覆盖源文件.如果要追加 ...

  9. CDH6.3 Centos7

    按照官方文档安装即可 CentOS7 上搭建 CDH(6.3.0) 官方文档:https://docs.cloudera.com/documentation/enterprise/6/6.3/topi ...

  10. Excel,此文件中的某些文本格式可能已经更改,因为它已经超出最多允许的字体数。

    既然是超出最多允许的字体数,那么就不要循环创建IFont.先创建一个IFont font=wk.CreateFont();后面都使用它即可.