React-Native实战项目-导航器篇（一）

前言：官方文档已经看了一遍，但印象不是很深，因而在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导航器案例练习

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