React Native系列——Navigator組件的使用介紹

時間  2019-11-11
標籤 react native 系列 navigator 組件 使用 介紹 欄目 React 简体版
原文   原文鏈接

1、介紹

    導航組件Navigator可讓咱們客戶端在不一樣的頁面見進行切換。爲了達到這樣的功能，Navigator提供了路由對象功能進行區分識別每個頁面。同時咱們能夠經過renderScene方法，Navaigator根據指定的路由進行渲染指定的界面。javascript

    支持：ios，androidhtml

    你們先把完整代碼看一遍，有個大概瞭解再開始看文章java

2、屬性

  • configureScene  function 方法，該爲可選的方法進行配置頁面切換動畫和手勢。該會經過路由和路由棧兩個參數調用，進行返回一個頁面參數配置對象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRightnode

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

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

  • navigationBar  node  該爲可選的參數，在頁面切換中用來提供一個導航欄ios

  • navigator object   該爲可選參數，能夠從父類導航器中獲取導航器對象git

  • onDidFoucs  function  該方法已經廢棄，咱們可使用navigationContext.addListener('didfocus',callback)方法進行替代。該 會在每次頁面切換完成或者初始化以後進行調用該方法。該參數爲新頁面的路由github

  • onWillFocus function  該方法已經廢棄，咱們可使用navigationContext.addListener('willfocus',callback)方法進行替代。該會頁面每次進行切換以前調用react-native

  • renderScene  function  該爲必須調用的方法，該用來渲染每個路由指定的頁面。參數爲路由以及導航器對象兩個參數，具體是方法以下:(route, navigator) =><MySceneComponent title={route.title} navigator={navigator} />

  • sceneStyle 樣式風格，該繼承了View視圖的全部樣式風格。能夠參照:點擊查看View樣式。 該設置用於每一個頁面容器的風格

    紅色的三個是主要方法

3、頁面跳轉效果

    爲了改變頁面切換的動畫或者頁面的手勢，該組件提供的configureScene屬性來進行獲取指定路由頁面的配置對象信息。對於頁面切換動畫或者更多的屏幕配置選項信息詳情能夠查看Navigator.SceneConfigs

關於動畫手勢有以下一些屬性:

 更多屬性你們能夠進行修改NavigatorSceneConfigs.js該文件便可

    1. PushFromRight

    2. FloatFromRight

    3. FloatFromLeft

    4. FloatFromBottom

    5. FloatFromBottomAndroid

    6. FadeAndroid

    7. HorizontalSwipeJump

    8. HorizontalSwipeJumpFromRight

    9. VerticalUpSwipeJump

    10. VerticalDownSwipeJump

4、頁面跳轉方法

  • getCurrentRoutes()    該進行返回存在的路由列表信息

  • jumpBack()    該進行回退操做  可是該不會卸載(刪除)當前的頁面

  • jumpForward()    進行跳轉到至關於當前頁面的下一個頁面

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

  • push(route)     導航切換到一個新的頁面中，新的頁面進行壓入棧。經過jumpForward()方法能夠回退過去

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

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

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

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

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

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

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

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

     說明

     一、一個有意思的事情是，若是你的動畫是從右邊往左進入的，你從左往右滑動，能夠回到前一個路由頁面

     若是想去掉手勢返回能夠這兒樣寫

<Navigator
                initialRoute={{params:{name:'Home頁面',age:14},component:Home}}
                configureScene={(route) => {
                    if (route.sceneConfig) {
                        let res=route.sceneConfig;
                        res.gestures=null;
                        return res;
                        //return route.sceneConfig;
                    }
                    return Navigator.SceneConfigs.FloatFromBottom;
                }}

                renderScene={(route, navigator) =>{
                    let DefaultComponent=route.component;
                    let number=12;
                    return <DefaultComponent number={number} {...route.params} navigator={navigator}/>
                }
              }
            />

 

     二、這些方法要合理使用纔可以達到最佳效果，好比篩選頁面就應該彈出一個新頁面而不把以前的頁面卸載。

     三、頁面跳轉方法中的route參數是什麼

        這些都是navigator能夠用的public method,就是跳轉用的，裏面有些帶參數的XXX(route)，新手第一次看這個文檔會疑惑，這個route參數是啥呢，這個route就是Navigator組件屬性的initialRoute，是一個對象。

 

解惑

    我最開始不理解他是怎麼設置的，因此每次都會是渲染相同的頁面，切換頁面的效果也同樣，若是所示

                                         

    產生錯誤的代碼，緣由在註釋中

class Rockq extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{name: 'Home頁面', index: 0}}
                configureScene={(route) => {
                    // 渲染的動畫是固定的了
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                }}
                renderScene={(route, navigator) =>{
                    const number=12;
                    // 渲染的組件是固定的了
                    return <Home number={number} {...route} navigator={navigator}/>
                }
              }
            />
        );
    }
}

 

疑問

一、一個應用中只須要一個Navigator嗎？

    導航組件中有這麼一個屬性（navigator object   該爲可選參數，能夠從父類導航器中獲取導航器對象），因此我猜想Navigator能夠嵌套，但最好用一個navigator，其實日常咱們在根組件上用一個Navigator就能夠了。

二、導航組件裏面的棧的概念？

    正是由於有了棧，才能夠實現返回前進的操做。

三、這些跳轉方法的區別？

     時間不夠，待完善。

四、navigationBar屬性

    這個組件我用了一下，就是在你手機屏幕的最下面展現你給的組件，弄不明白乾什麼用的，好像沒什麼大用，回頭弄清楚了了再給完善進來。

五、組件上onDidFoucs  onWillFocus 兩個廢棄的方法怎麼使用

     在組件中使用，可是你在用的時候就會發現從page1跳轉到home頁面的時候，page1中和home中的事件都觸發了，可能由於在組件離開的時候忘了取消了，這是react中監聽事件的問題。

componentWillMount(){
    this.props.navigator.navigationContext.addListener('willfocus', ()=>Alert.alert(
        'Alert Title',
        `將要進入路由${this.props.name}`
    ));
    this.props.navigator.navigationContext.addListener('didfocus', ()=>Alert.alert(
        'Alert Title',
        `進入路由${this.props.name}`
    ));
}

    換行

componentWillUnmount(){
    this.props.navigator.navigationContext.removeListener('willfocus', ()=>Alert.alert(
        'Alert Title',
        `將要進入路由${this.props.name}`
    ));
    this.props.navigator.navigationContext.removeListener('didfocus', ()=>Alert.alert(
        'Alert Title',
        `進入路由${this.props.name}`
    ));
}

    重要思考：

        後來我又想了一下，發現不對，都是同一個navigator對象，不用添加那麼屢次因此這個方法能夠加載組件的生命週期中，也能夠加載Navigator組件中的renderScene方法中。

參考文章

http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2

http://reactnative.cn/docs/0.24/navigator.html#content

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/

免責說明

一、本博客中的文章摘自網上的衆多博客，僅做爲本身知識的補充和整理，並分享給其餘須要的coder，不會用於商用。

二、由於不少博客的地址看完沒有及時作保存，因此不少不會在這裏標明出處，很是感謝各位大牛的分享，也但願你們理解。

完整代碼

項目結構

一、App.js代碼

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';

import Home from './Home';

export default class App extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{params:{name:'Home頁面'},component:Home}}
                configureScene={(route) => {
                    if (route.sceneConfig) {
                        return route.sceneConfig;
                    }
                    return Navigator.SceneConfigs.FloatFromBottom;
                }}
                renderScene={(route, navigator) =>{
                    let DefaultComponent=route.component;
                    let number=12;
                    return <DefaultComponent number={number} {...route.params} navigator={navigator}/>
                }
              }
            />
        );
    }
}

const styles = StyleSheet.create({
});

    關鍵就在於configureScene中的動畫不要寫死，renderScene中渲染的組件不要寫死

二、Home.js

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    TouchableHighlight,
    View,
    Navigator
} from 'react-native';

import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';


export default class Home extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    {this.props.name}
                </Text>
                <TouchableHighlight
                    onPress={()=>this.props.navigator.push({
                        sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                        component: Page1,
                        params:{
                            name: 'Page1頁面'
                        }
                    })
                }>
                    <Text style={[styles.page1,styles.text]}>
                        跳轉到Page1
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={()=>this.props.navigator.push({
                        sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
                        component: Page2,
                        params:{
                            name: 'Page2頁面'
                        }
                    })
                }>
                    <Text style={[styles.page2,styles.text]}>
                        跳轉到Page2
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={()=>this.props.navigator.push({
                        sceneConfig: Navigator.SceneConfigs.HorizontalSwipeJumpFromRight,
                        component: Page3,
                        params:{
                            name: 'Page3頁面'
                        }
                    })
                }>
                    <Text style={[styles.page3,styles.text]}>
                        跳轉到Page3
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title:{
        fontSize:60
    },
    text: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    page1: {
        fontSize: 40,
        backgroundColor:'red'
    },
    page2: {
        fontSize: 40,
        backgroundColor:'blue'
    },
    page3: {
        fontSize: 40,
        backgroundColor:'yellow'
    },
});

三、Page1.js

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    TouchableHighlight,
    View,
    Navigator
} from 'react-native';

import Page2 from './Page2';


export default class Page1 extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    {this.props.name}
                </Text>
                <TouchableHighlight
                    onPress={()=>this.props.navigator.push({
                        sceneConfig: Navigator.SceneConfigs.FloatFromRight,
                        component: Page2,
                        params:{
                            name: 'Page2頁面'
                        }
                    })
                }>
                    <Text style={[styles.text]}>
                        跳轉到Page2
                    </Text>
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={()=>this.props.navigator.pop()
                }>
                    <Text style={[styles.text]}>
                        返回
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title:{
        fontSize:60
    },
    text: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
        backgroundColor:'#00ced1',
        fontSize: 40,
    }
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程