React-Native實戰項目-導航器篇（一）

時間 2019-11-20

標籤 react native 實戰項目導航欄目 React 简体版

原文原文鏈接

前言：官方文檔已經看了一遍，但印象不是很深，因而在mooc上找了個實戰學習項目作一作。html

本篇目錄：react

基礎導航練習√

1.ReactNavigation之createStackNavigator導航器案例練習android

相關資料：ios

練習連接：http://www.devio.org/2018/12/24/createStackNavigator/react-native

React Navigationan官網：https://reactnavigation.org/docs/zh-Hans/getting-started.htmlide

1. 初始化react native項目學習

react-native init react_navigation_demo

2. 在項目目錄下安裝reactnavigation這個包 flex

yarn add react-navigation

3. 安裝依賴this

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

4. 版本更新後，此步驟忽略。
spa

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>
    )
});//存在問題，須要後期調整