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導航器案例練習

·該導航器主要與登陸驗證有關，在後面的章節會具體介紹。