點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:33:28

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼:本文介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator，分享給大家。具體如下： Navigator即導(dǎo)航器，通過(guò)導(dǎo)航器我們可以實(shí)現(xiàn)應(yīng)用在不同的頁(yè)面之間進(jìn)行跳轉(zhuǎn)。導(dǎo)航器會(huì)建立一個(gè)路由棧，用來(lái)彈出，推入或者替換路由狀態(tài)。該路由棧相當(dāng)于Android原生中使用的任務(wù)棧

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼:本文介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator，分享給大家。具體如下： Navigator即導(dǎo)航器，通過(guò)導(dǎo)航器我們可以實(shí)現(xiàn)應(yīng)用在不同的頁(yè)面之間進(jìn)行跳轉(zhuǎn)。導(dǎo)航器會(huì)建立一個(gè)路由棧，用來(lái)彈出，推入或者替換路由狀態(tài)。該路由棧相當(dāng)于Android原生中使用的任務(wù)棧

本文介紹了ReactNative頁(yè)面跳轉(zhuǎn)Navigator，分享給大家。具體如下：

Navigator即導(dǎo)航器，通過(guò)導(dǎo)航器我們可以實(shí)現(xiàn)應(yīng)用在不同的頁(yè)面之間進(jìn)行跳轉(zhuǎn)。

導(dǎo)航器會(huì)建立一個(gè)路由棧，用來(lái)彈出，推入或者替換路由狀態(tài)。該路由棧相當(dāng)于Android原生中使用的任務(wù)棧。

renderScene

該方法就相當(dāng)于我們使用的startActivity方法了，我們可以在該方法中設(shè)置需要渲染的場(chǎng)景（跳轉(zhuǎn)的頁(yè)面），該方法接收兩個(gè)參數(shù)（必要參數(shù)），route和navigator，其中route就是路由的頁(yè)面，navigator是一個(gè)Navigator對(duì)象，因?yàn)镹avigator對(duì)象擁有pop，push，jump等方法，我們需要導(dǎo)航器對(duì)象來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。而路由route需要我們提前進(jìn)行配置。

我們來(lái)看一下renderScene的使用：

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

通過(guò)上面的方法來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，同時(shí)將導(dǎo)航器作為屬性進(jìn)行傳遞過(guò)去。之前說(shuō)過(guò)，route需要進(jìn)行配置，通過(guò)initialRoute方法來(lái)對(duì)我們的路由進(jìn)行初始化，如下所示：

 initialRoute={{ name: defaultName, component: defaultComponent }}

initialRoute是一個(gè)對(duì)象，我們通過(guò)給對(duì)象設(shè)置名稱(chēng)和對(duì)應(yīng)的組件完成route的初始化，即只要傳入需要跳轉(zhuǎn)的組件的名稱(chēng)和組建對(duì)象，即可在renderScene中完成頁(yè)面的跳轉(zhuǎn)。

再回頭看renderScene方法，route參數(shù)就是我們通過(guò)initialRoute初始化的對(duì)象，我們通過(guò)route.component即可獲得我們需要渲染（即跳轉(zhuǎn)到）的對(duì)象，然后在return的時(shí)候返回這個(gè)對(duì)象完成頁(yè)面的跳轉(zhuǎn)。為了防止出現(xiàn)問(wèn)題，我們加上route.component為空的判斷，如果不為空，再進(jìn)行渲染。

 renderScene={(route, navigator) => {
 let Component = route.component;
 if(route.component){
 return <Component {...route.params} navigator={navigator} />
 }
 }}

configureScene

該方法用來(lái)設(shè)置指定路由對(duì)象的配置信息，從而改變場(chǎng)景的動(dòng)畫(huà)或者手勢(shì)。

 configureScene={(route) => {
 //跳轉(zhuǎn)的動(dòng)畫(huà)
 return Navigator.SceneConfigs.VerticalDownSwipeJump;
 }}

例如通過(guò)如下的方法我們就可以對(duì)我們即將要跳轉(zhuǎn)的界面設(shè)置跳轉(zhuǎn)動(dòng)畫(huà)。

Navigator.SceneConfigs為我們提供了大量的跳轉(zhuǎn)動(dòng)畫(huà)，具體可以參考如下文件。

MyProject\node_modules\React-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js

這樣我們就完成了在程序默認(rèn)頁(yè)面到我們自定義頁(yè)面之間的跳轉(zhuǎn)過(guò)程。

完整代碼如下所示：

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


import FirstPageComponent from './app/src/FirstPageComponent';

export default class MyProject extends React.Component {
 render() {
 var defaultName = 'FirstPageComponent';
 var defaultComponent = FirstPageComponent;
 return (
 <Navigator
 //指定了默認(rèn)的頁(yè)面，也就是啟動(dòng)app之后會(huì)看到的第一屏，需要兩個(gè)參數(shù)，name跟component
 initialRoute={{ name: defaultName, component: defaultComponent }}
 configureScene={(route) => {
 //跳轉(zhuǎn)的動(dòng)畫(huà)
 return Navigator.SceneConfigs.FadeAndroid;
 }}
 renderScene={(route, navigator) => {
 let Component = route.component;
 if(route.component){
 return <Component navigator={navigator} />
 }
 }} />
 );
 }
} 

AppRegistry.registerComponent('MyProject', () => MyProject);

其中FirstPageComponent是我們自定義的一個(gè)組件，沒(méi)有添加功能，只放了一個(gè)Text，如下所示：

import React,{
 View,
 Text,
} from 'react-native';

export default class FirstPageComponent extends React.Component{
 constructor(props){
 super(props);
 this.state = {};
 }

 render(){
 return (
 <View>
 <Text>我是默認(rèn)頁(yè)面</Text>
 </View>
 );
 }
}

如果我們現(xiàn)在想要實(shí)現(xiàn)一個(gè)從FirstPageComponent到另一個(gè)頁(yè)面之間的跳轉(zhuǎn)，那我們需要怎么做呢？

因?yàn)槲覀冎霸陧?yè)面跳轉(zhuǎn)的時(shí)候?qū)?dǎo)航器對(duì)象作為屬性傳遞給了我們的FirstPageComponent，那么我們此時(shí)就可以獲取這個(gè)navigator對(duì)象，navigator中有很多方法可以供我們調(diào)用進(jìn)行導(dǎo)航。

首先我們給創(chuàng)建一個(gè)可點(diǎn)擊的區(qū)域包裹Text，這樣點(diǎn)擊Text就可以觸發(fā)事件，如下所示，改造render，

 render() {
 return (
 <View>
 <TouchableOpacity onPress={this._pressButton.bind(this)}>
 <Text>點(diǎn)我跳轉(zhuǎn)</Text>
 </TouchableOpacity>
 </View>
 );
 }

我們先不關(guān)注TouchableOpacity是什么，只知道他是一片可點(diǎn)擊的區(qū)域，并且擁有點(diǎn)擊事件即可。

然后我們實(shí)現(xiàn)_pressButton方法，如下所示：

 _pressButtoon(){
 const { navigator} = this.props;
 if (navigator) {
 navigator.push({
 name:'SecondPageComonent',
 component:SecondPageComonent,
 })
 }
 }

我們從傳遞過(guò)來(lái)的屬性中獲取navigator，然后調(diào)用navigator的push方法，push方法接收的參數(shù)為route對(duì)象，我們定義route對(duì)象的名稱(chēng)和組件對(duì)象，將其放入路由棧，這樣我們通過(guò)操控路由棧的方式實(shí)現(xiàn)了另一個(gè)頁(yè)面的跳轉(zhuǎn)。

這樣我們改造后的FirstPageComponent如下所示：

import React,{
 View,
 Text,
 TouchableOpacity
} from 'react-native';

import SecondPageComonent from "./SecondPageComponent";

export default class FirstPageComponent extends React.Component{
 constructor(props){
 super(props);
 this.state = {};
 }

 _pressButtoon(){
 const { navigator} = this.props;
 if (navigator) {
 navigator.push({
 name:'SecondPageComonent',
 component:SecondPageComonent,
 })
 }
 }

 render(){
 return (
 <View>
 <TouchableOpacity onPress={this._pressButtoon.bind(this)}>
 <Text>點(diǎn)我跳轉(zhuǎn)</Text>
 </TouchableOpacity>
 </View>
 );
 }
}

其中SecondPageComonent是我們定義的另一個(gè)組件，實(shí)現(xiàn)代碼如下所示：

import React,{
 View,
 Text,
 TouchableOpacity,
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component{
 constructor(props){
 super(props);
 this.state = {};
 }

 _pressButton(){
 const { navigator } = this.props;
 if(navigator){
 navigator.pop();
 }
 }

 render(){
 return (
 <View>
 <TouchableOpacity onPress={this._pressButton.bind(this)}>
 <Text>點(diǎn)我跳轉(zhuǎn)回去</Text>
 </TouchableOpacity>
 </View>
 );
 }
}

在SecondPageComponent中，我們通過(guò)控制路由棧將頁(yè)面出棧的方式pop()完成跳轉(zhuǎn)回到第一個(gè)頁(yè)面的功能。

我們發(fā)現(xiàn)，頁(yè)面的跳轉(zhuǎn)都是通過(guò)navigator對(duì)象的一系列方法通過(guò)對(duì)路由棧的操控來(lái)實(shí)現(xiàn)頁(yè)面之間跳轉(zhuǎn)加載的功能的，我們看一下導(dǎo)航器都有那些方法：

getCurrentRoutes() - 獲取當(dāng)前棧里的路由，也就是push進(jìn)來(lái)，沒(méi)有pop掉的那些。
jumpBack() - 跳回之前的路由，當(dāng)然前提是保留現(xiàn)在的，還可以再跳回來(lái)，會(huì)給你保留原樣。
jumpForward() - 上一個(gè)方法不是調(diào)到之前的路由了么，用這個(gè)跳回來(lái)就好了。
jumpTo(route) - 跳轉(zhuǎn)到已有的場(chǎng)景并且不卸載。
push(route) - 跳轉(zhuǎn)到新的場(chǎng)景，并且將場(chǎng)景入棧，你可以稍后跳轉(zhuǎn)過(guò)去
pop() - 跳轉(zhuǎn)回去并且卸載掉當(dāng)前場(chǎng)景
replace(route) - 用一個(gè)新的路由替換掉當(dāng)前場(chǎng)景
replaceAtIndex(route, index) - 替換掉指定序列的路由場(chǎng)景
replacePrevious(route) - 替換掉之前的場(chǎng)景
immediatelyResetRouteStack(routeStack) - 用新的路由數(shù)組來(lái)重置路由棧
popToRoute(route) - pop到路由指定的場(chǎng)景，其他的場(chǎng)景將會(huì)卸載。
popToTop() - pop到棧中的第一個(gè)場(chǎng)景，卸載掉所有的其他場(chǎng)景。

參數(shù)的傳遞

當(dāng)我們從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的時(shí)候，總免不了需要進(jìn)行參數(shù)的傳遞，那么我們?cè)趺磳?shù)傳遞到另一個(gè)頁(yè)面呢？

我們可以通過(guò)push()方法將參數(shù)傳遞過(guò)去。

首先我們需要明確FirstPageComponent，MyProject和SecondPageComponent三者之間的關(guān)系，程序啟動(dòng)時(shí)首先會(huì)啟動(dòng)MyProject，然后看到在MyProject中有一個(gè)導(dǎo)航器，該導(dǎo)航器初始化路由的時(shí)候獲取了我們的FirstPageComponent，將其解析為一個(gè)組件在renderScene的時(shí)候?qū)⑵浼虞d到頁(yè)面上。我們?cè)賮?lái)看一下導(dǎo)航器加載的方法：

 renderScene={(route, navigator) => {
 let Component = route.component;
 if(route.component){
 return <Component navigator={navigator} />
 }
 }}

我們所有的組件都是通過(guò)導(dǎo)航器加載到頁(yè)面上的，第一個(gè)頁(yè)面是，第二個(gè)頁(yè)面并不是由第一個(gè)頁(yè)面啟動(dòng)的，而是有導(dǎo)航器控制路由棧來(lái)顯示在頁(yè)面上的，我們?cè)趓enderScene是獲取到第一個(gè)頁(yè)面，并且將其渲染到屏幕上，我們?cè)诘谝粋€(gè)頁(yè)面中設(shè)置的push信息也是將信息傳遞給導(dǎo)航器的，那么我們就可以在這個(gè)時(shí)候?qū)⑿枰獋鬟f給Navigator，然后讓其在傳遞給第二個(gè)頁(yè)面，這樣就可以完成參數(shù)的傳遞。

首先我們更改FirstPageComponent的按鈕點(diǎn)擊事件，如下所示：

 navigator.push({
 name:'SecondPageComonent',
 component:SecondPageComonent,
 params:{
 message:"I am from FirstPageComponent",
 }
 })

然后在Navigator中獲取，如下所示：

 renderScene={(route, navigator) => {
 let Component = route.component;
 if(route.component){
 return <Component {...route.params} navigator={navigator} />
 }
 }}

在這里就相當(dāng)于將參數(shù)傳遞給了Navigator，展開(kāi)成然后我們就可以在第二個(gè)頁(yè)面中通過(guò)props.message獲取到信息，如下所示,添加頁(yè)面掛載時(shí)的方法，設(shè)置狀態(tài)的方法將獲取到的參數(shù)保存在state中：

 componentDidMount(){
 this.setState({
 message:this.props.message,
 });
 }

如果當(dāng)我們返回的時(shí)候需要攜帶參數(shù)，我們可以通過(guò)給navigator設(shè)置一個(gè)回調(diào)方法，用于給第一個(gè)頁(yè)面設(shè)置信息，這樣就可以完成返回時(shí)數(shù)據(jù)的傳遞了。

完整代碼如下所示：

index.android.js

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


import FirstPageComponent from './app/src/FirstPageComponent';

export default class MyProject extends React.Component {
 render() {
 var defaultName = 'FirstPageComponent';
 var defaultComponent = FirstPageComponent;
 return (
 <Navigator
 //指定了默認(rèn)的頁(yè)面，也就是啟動(dòng)app之后會(huì)看到的第一屏，需要兩個(gè)參數(shù)，name跟component
 initialRoute={{ name: defaultName, component: defaultComponent }}
 configureScene={(route) => {
 //跳轉(zhuǎn)的動(dòng)畫(huà)
 return Navigator.SceneConfigs.FadeAndroid;
 }}
 renderScene={(route, navigator) => {
 let Component = route.component;
 if(route.component){
 return <Component {...route.params} navigator={navigator} />
 }
 }} />
 );
 }
} 

AppRegistry.registerComponent('MyProject', () => MyProject);

FirstPageComponent.js

import React,{
 View,
 Text,
 TouchableOpacity
} from 'react-native';

import SecondPageComonent from "./SecondPageComponent";

export default class FirstPageComponent extends React.Component{
 constructor(props){
 super(props);
 this.state = {
 resultMessage:"hello",
 };
 }

 _pressButtoon(){
 var _this = this;
 const { navigator} = this.props;
 if (navigator) {
 navigator.push({
 name:'SecondPageComonent',
 component:SecondPageComonent,
 params:{
 message:"I am from FirstPageComponent",
 getResult:function(myMessage){
 _this.setState({
 resultMessage:myMessage,
 })
 }
 }
 })
 }
 }

 render(){
 return (
 <View>
 <TouchableOpacity onPress={this._pressButtoon.bind(this)}>
 <Text>{this.state.resultMessage}</Text>
 </TouchableOpacity>
 </View>
 );
 }
}

SecondPageComponent.js

import React,{
 View,
 Text,
 TouchableOpacity,
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component{
 constructor(props){
 super(props);
 this.state = {
 message:"",
 };
 }

 componentDidMount(){
 this.setState({
 message:this.props.message,
 });
 }

 _pressButton(){
 const { navigator } = this.props;
 if(this.props.getResult){
 this.props.getResult("This is from SecondPageComponent");
 }

 if(navigator){
 navigator.pop();
 }
 }

 render(){
 return (
 <View>
 <TouchableOpacity onPress={this._pressButton.bind(this)}>
 <Text>{this.state.message}</Text>
 </TouchableOpacity>
 </View>
 );
 }
}

最終效果如下所示：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：跳轉(zhuǎn) 頁(yè)面跳轉(zhuǎn) React

熱門(mén)焦點(diǎn)

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

ReactNative頁(yè)面跳轉(zhuǎn)Navigator實(shí)現(xiàn)的示例代碼

最新推薦

猜你喜歡

熱門(mén)推薦