【React Native開發】 - 導航器Navigator的使用

1.Navigator的認識

官方介紹：使用Navigator可以使的應用在不同場景（頁面）之間進行切換。Navigator通過路由對象（route）分辨不同的

場景（頁面）。利用renderScene()方法，導航欄可以根據指定的路由來渲染場景（頁面）。

Navigator可以通過configureScene屬性獲取路由對象的配置信息，從而改變場景的動畫或手勢。

2.Navigator屬性

- initialRoute object 參數對象進行設置導航初始化的路由頁面。路由是標識導航器渲染標識每一個頁面的對象。initialRoute必須爲initialRouteStack中的路由。同時initialRoute默認爲initialRouteStack中路由棧的最後一項。

- initialRouteStack [object] 參數對象數組是一個初始化的路由數組。如果initalRoute屬性沒有設置的話，那麼就必須設置initialRouteStack屬性，使用最後一項作爲初始路由。如果initalRouteStack屬性沒有設置的話，會生成只包含initalRoute值的數組。

- configureScene function 方法，爲可選的方法，進行配置頁面切換動畫和手勢。通過路由和路由棧兩個參數調用，返回一個頁面參數配置對象：


configureScene = {
    (route,routeStack) => {
        return Navigator.SceneConfigs.FloatFromRight;　　//配置場景動畫，頁面之間跳轉時候的動畫
    }
}
 - navigator object 可選參數，可以從父類導航器中獲取導航器對象。
 - navigationBar  node  該爲可選的參數，在頁面切換中用來提供一個導航欄。
 - renderScene  function  必須調用的方法，用來渲染每一個路由指定的頁面。參數爲路由以及導航器對象兩個參數。
 - sceneStyle 樣式風格，該繼承了View視圖的所有樣式風格。

場景轉場動畫的分類：

 Navigator.SceneConfigs.PushFromRight (default)

 Navigator.SceneConfigs.FloatFromRight
 Navigator.SceneConfigs.FloatFromLeft
 Navigator.SceneConfigs.FloatFromBottom
 Navigator.SceneConfigs.FloatFromBottomAndroid
 Navigator.SceneConfigs.FadeAndroid
 Navigator.SceneConfigs.HorizontalSwipeJump
 Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
 Navigator.SceneConfigs.VerticalUpSwipeJump
 Navigator.SceneConfigs.VerticalDownSwipeJump

3.Navigator方法

- getCurrentRoutes() 返回存在的路由列表信息
- jumpBack() 回退操作，但是不會卸載（刪除）當前頁面

- jumpForward() 跳轉到相對於當前頁面的下一個頁面

- jumpTo(route) 根據傳入的路由信息，跳轉到一個指定的頁面（該頁面不會卸載刪除）

- push(route) 導航切換到一個新的頁面，新的頁面進行入棧。通過jumpForward()方法可以回退過去

- pop 當前頁面彈出來，跳轉到棧中下一個頁面，並且卸載刪除掉當前的頁面

- replace(route) 傳入路由的指定頁面進行替換掉當前的頁面

- replaceAtIndex(route, index) 傳入路由以及位置索引，使用該路由指定的頁面跳轉到指定位置的頁面

- replacePrevious(route) 傳入路由，通過指定路由的頁面替換掉前一個頁面

- resetTo(route) 進行導航到新的界面，並且重置整個路由棧

- immediatelyResetRouteStack(routeStack) 該通過一個路由頁面數組來進行重置路由棧

- popToRoute(route) 進行彈出相關頁面，跳轉到指定路由的頁面，彈出來的頁面會被卸載刪除

- popToTop() 進行彈出頁面，導航到棧中的第一個頁面，彈出來的所有頁面會被卸載刪除

4.實例

index.android.js和index.ios.js代碼：

import './luancher'

luancher.js

import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native';

import Root from './navigator/root'

AppRegistry.registerComponent('ImageDemo', () => Root);

使Android和IOS都可運行。

root.js

import React ,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Navigator,
    Dimensions,
    Platform,
    StatusBar,
} from 'react-native'
import Home from './Home'
export default class Root extends Component{
    constructor(props){
        super(props)
    }
    
    render(){
        return (
            Platform.OS === 'ios'?(
                <View style={styles.container}>
                    <Navigator
                        initialRoute = {{name: 'home', component: Home}}　　//初始化導航器Navigator,指定默認的頁面
                        configureScene = {
                            (route,routeStack) => {
                                return Navigator.SceneConfigs.FloatFromRight;　　//配置場景動畫，頁面之間跳轉時候的動畫
                            }
                        }
                        renderScene = {
                            (route, navigator) =>{ //route裏其實就是我們傳遞的name,component，navigator是一個 Navigator的對象
                                let Component = route.component;
                                return <Component{...route.params} navigator = {navigator} />　　//渲染場景  navigator作爲props傳遞給了這個 component。
                            }
                        }
                    />
                </View>
            ):(
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="#FD6363"
                    barStyle="light-content"/>
                <Navigator
                    initialRoute = {{name: 'home', component: Home}}　　//初始化導航器Navigator,指定默認的頁面
                    configureScene = {
                            (route) => {
                                return Navigator.SceneConfigs.FloatFromRight;　　//配置場景動畫，頁面之間跳轉時候的動畫
                            }
                        }
                    renderScene = {
                            (route, navigator) =>{ //route裏其實就是我們傳遞的name,component，navigator是一個 Navigator的對象
                                let Component = route.component;
                                return <Component{...route.params} navigator = {navigator} />　　//渲染場景  navigator作爲props傳遞給了這個 component。
                            }
                        }
                />
            </View>
        )
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
})
root.js解析：initialRoute初始化一個Route（路由），定義初始化的Component；
      configureScene設置頁面切換的動畫；
      renderScene渲染場景，指定路由和導航器，並把導航器傳遞進去。

Home.js

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Navigator,
    TouchableHighlight,
    Dimensions,
} from 'react-native'
import Detail from './Detail'
const {width,height} = Dimensions.get('window')
export default class Home extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.btn}>
                <TouchableHighlight style={styles.touchableBtn} onPress={this.toPage.bind(this)}>
                    <Text style={styles.text}>跳轉頁面</Text>
                </TouchableHighlight>
            </View>
        )
    }
    toPage(){
        const {navigator} = this.props
        if (navigator){
            navigator.push({
                name:'detail',
                component:Detail,
            })
        }
    }
}
const styles = StyleSheet.create({
    btn:{
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#fff',
        height:height,
    },
    touchableBtn:{
        backgroundColor:'#FD6363',
        padding:8,
        borderRadius:8,
    },
    text:{
        color:'#fff',
        fontSize:12,
    },
})
Home.js解析：

toPage(){
        const {navigator} = this.props 
        if (navigator){
            navigator.push({
                name:'detail',
                component:Detail,
            })
        }
    }

navigator.push壓棧

 const {navigator} = this.props //從props中取的Navigator，確保用的是同一個

Detail.js

import React ,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableHighlight,
    Dimensions,
} from 'react-native'
const {width,height} = Dimensions.get('window')
export default class Detail extends Component{
    constructor(props){
        super(props)
    }
    back(){
        const{navigator} = this.props;
        if(navigator){
            navigator.pop();　　//navigator.pop 使當前頁面出棧, 顯示上一個棧內頁面.
        }
    }
    render(){
        return (
            <View style={styles.container}>
                <View style={styles.titleStyle}>
                    <TouchableHighlight onPress={this.back.bind(this)}>
                        <Image source={require('./images/ic_back.png')} style={styles.back}></Image>
                    </TouchableHighlight>
                    <Text style={styles.textStyle}>詳情頁</Text>
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    titleStyle:{
        flexDirection:'row',
        height:40,
        backgroundColor:'#FD6363',
        alignItems:'center',
    },
    back:{
        marginLeft:10,
        width:25,
        height:25,
    },
    textStyle:{
        position:'absolute',
        color:'#fff',
        fontSize:14,
        top:12,
        left:(width/2-12),
    },
})

5.效果

點擊跳轉頁面按鈕跳轉到詳情頁面

點擊返回按鈕再次返回到上一頁面

【React Native開發】 - 導航器Navigator的使用

1.Navigator的認識

2.Navigator屬性

3.Navigator方法

4.實例

5.效果

【React Native開發】- TextInput鍵盤輸入文本

【React Native】- ReactNative的版本升級

【Vue.js】- 計算屬性

【React Native開發】- ListView垂直的滾動列表

【React Native開發】 - 導航器Navigator的使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結