react-native頁面的跳轉
react-native的頁面跳轉
引言 :react-native出來也有一段時間了,一直只是聽說react-nativa是如何的好,能夠實現跨平臺(android、IOS).一直沒有去主動交接它。直到最近,公司為了節省後期的維護成本,也同時將現有的專案進行一次升級,然後決定用react-native重新開發一套。 當然了,接觸一門新的技術難免會遇到很多的難點。根據實際開發遇到的問題寫點文章。鞏固自己的同時也許能幫到別人。 我學習的資料網[React Native 中文網](http://reactnative.cn/) 學習前期一些屬性(props)、狀態(state)、樣式(style)、佈局(flexbox)看著敲敲程式碼就能比較好接受了。 難點就是卡在頁面的跳轉了,雖然文件也提供了頁面跳轉的教程,但給我的感覺是一個頁面自己在跳然後修改了一寫屬性值。(這並不能讓我很滿意,於是我就決定自己找資料寫一個自己滿意的) [參考地址](http://blog.csdn.net/youth_never_go_away/article/details/52572029) 正題開始:先給大家上一組圖(很慚愧,不會上傳視訊)。
第一個介面
點選跳轉的圖片
點選跳轉的圖片
注:在android。處於主介面時,支援雙擊返回退出。在其他頁面時,支援點選返回回到上一個介面。
在實現介面跳轉時需要提前瞭解的知識:
- navigater(導航器)
- scene(場景)
route(路由)
這三個概念也會在下面的程式碼中介紹到。
程式碼部分
程式的入口:index.ios.js
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native' ;
import SimpleComponent from './jsScene/SimpleComponent';
export default class helloRN extends Component {
render() {
return (
//顯示元件
<SimpleComponent />
);
}
}
AppRegistry.registerComponent('helloRN', () => helloRN);
入口程式碼非常簡單,就是顯示一個SimpleComponent的元件(不過你們要是照著敲時,注意資料夾的關係,這個很重要)
元件SimpleComponent.js
import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SimpleComponent extends Component {
render() {
//元件名字
let defaultName = 'FirstPageComponent';
//元件的Class用來例項化成<Component/>標籤的
let defaultComponent = FirstPageComponent;
return (
<Navigator
//這個指定了預設的頁面,也就是啟動app之後會看到介面的第一屏。 需要填寫兩個引數: name 跟 component。
//(注意這裡填什麼引數純粹是自定義的,因為這個引數也是你自己發自己收,自己在renderScene方法中處理。
// 我們這裡示例用了兩個引數,但其實真正使用的引數只有component)
initialRoute={{ name: defaultName, component: defaultComponent }} //初始化場景
//頁面跳轉動畫 可以返回多個動畫 使用||返回
configureScene={(route) => {
return Navigator.SceneConfigs.HorizontalSwipeJump; //設定場景的切換方式
}}
//渲染場景 route中就是我們自定義的 name 和 component
//navigator 就是Navigator物件
renderScene={(route, navigator) => {
let Component = route.component;
//Component 是route的component引數值 在路由中初始化的component的引數值是 defaultComponent
//所以 Component元件就是FirstPageComponent元件
return <Component {...route.params} navigator={navigator} />
}} />
);
}
}
這段程式碼裡面的內容就比較複雜了,我就每個關鍵字逐一解釋,主要的內容是return()中的內容。
< Navigater />個人Navigater是所有元件的一個容器,所有的元件都會在Navigater中進行處理,後面會有程式碼進行很好的解釋。
initialRoute={{ name: defaultName, component: defaultComponent }},這段程式碼是初始化一個路由,每一個頁面以route為單位在Navigater中活動(顯示或移除)
return Navigator.SceneConfigs.HorizontalSwipeJump; //介面的切換效果
renderScene={(route, navigator) => {
let Component = route.component;
//Component 是route的component引數值 在路由中初始化的component的引數值是 defaultComponent
//所以 Component元件就是FirstPageComponent元件
return <Component {...route.params} navigator={navigator} />
}}
這是最重要的一段程式碼,渲染一個場景,然後將渲染的場景(FirstPageComponent)返回(顯示出來)。
元件FirstPageComponent.js
import React, { Component } from 'react';
import {
View,
StyleSheet,
Navigator,
Text,
BackAndroid,
TouchableOpacity
} from 'react-native'
//(MyToast是本人橋接的android的Toast。實際使用的過程可以直接去掉,以免報錯)
import MyToast from './MyToast';
// // 下一句中的ToastAndroid即對應上文
// // public String getName()中返回的字串
// // 練習時請務必選擇另外的名字!
//
// export default NativeModules.ToastAndroid;
import SecondPageComponent from './SecondPageComponent';
import ThirdPageComponent from './ThirdPageComponent';
import FourthPageComponent from './FourthPageComponent';
export default class FirstPageComponent extends Component{
constructor(props){
super(props);
this.state = {};
this.firstClick = 0;
this.handleBack = this.handleBack.bind(this);
}
//生命週期方法。在組建第一次繪製完成後呼叫,通知組建已經載入完成。
componentDidMount () {
BackAndroid.addEventListener('hardwareBackPress', this.handleBack) //增加手機物理返回鍵的監聽
}
//生命週期方法。組建被移除時呼叫此方法
componentWillUnmount () {
BackAndroid.removeEventListener('hardwareBackPress', this.handleBack) //增加手機物理返回鍵的監聽
}
//雙擊返回鍵退出
handleBack(){
const { navigator } = this.props;
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop();
return true;
}else{
let timestamp = (new Date()).valueOf();
if(timestamp - this.firstClick > 2000){
MyToast.show('在按一次退出',MyToast.SHORT);
this.firstClick = timestamp;
return true;
}else{
return false;
}
}
}
//頁面的跳轉
_pressButton(index){
const { navigator } = this.props;
if (navigator){
switch (index) {
case 2:
navigator.push({
name:'SecondPageComponent',
component:SecondPageComponent,
});
break;
case 3:
navigator.push({
name:'ThirdPageComponent',
component:ThirdPageComponent,
});
break;
case 4:
navigator.push({
name:'FourthPageComponent',
component:FourthPageComponent,
});
break;
default:
break;
}
}
}
render(){
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this,2)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到2
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._pressButton.bind(this,3)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到3
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._pressButton.bind(this,4)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到4
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
red:{
fontSize:40,
fontWeight:'300',
color:'red'
}
});
還是先從主要的方法說起
return(
<View>
<TouchableOpacity onPress={this._pressButton.bind(this,2)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到2
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._pressButton.bind(this,3)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到3
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._pressButton.bind(this,4)}
style={{ flexDirection:'row', alignItems:'center' }}>
<Text style={styles.red}>點我跳轉到4
</Text>
</TouchableOpacity>
</View>
)
這只是基本的排列,主要要解釋是的是this._pressButton.bind(this,4)方法。這就是點選事件呼叫_pressButton(index)方法,index是this後面的引數,接下來看方法
_pressButton(index){
const { navigator } = this.props;
if (navigator){
switch (index) {
case 2:
navigator.push({
name:'SecondPageComponent',
component:SecondPageComponent,
});
break;
case 3:
navigator.push({
name:'ThirdPageComponent',
component:ThirdPageComponent,
});
break;
case 4:
navigator.push({
name:'FourthPageComponent',
component:FourthPageComponent,
});
break;
default:
break;
}
}
}
在這段程式碼中有一個難以理解的地方就是navigater物件是哪裡來的?
回到simplePageComponent.js中
return < Component {…route.params} navigator={navigator} />
在返回時返回了一個navigator物件的屬性
* const { navigator } = this.props; *
這裡就獲取到了。
navigator.push({
name:'ThirdPageComponent',
component:ThirdPageComponent,
});
這段程式碼就是將ThirdPageComponent元件放入navigator的棧中。達到顯示的目的。
ThirdPageComponent.js方法中就比較簡單了
import React, { Component } from 'react';
import {
View,
StyleSheet,
Navigator,
Image,
Dimensions,
Text,
TouchableOpacity
} from 'react-native'
var deviceWidth = Dimensions.get('window').width;
const BANNER_IMGS = [
require('../imgs/meinv2.png'),
require('../imgs/meinv3.png'),
require('../imgs/meinv4.png'),
require('../imgs/meinv2.png')
];
export default class ThirdPageComponent extends React.Component {
constructor(props) {
super(props);
this._pressButton = this._pressButton.bind(this);
}
_pressButton() {
//獲取SampleComponent中建立的Navigator物件
const { navigator } = this.props;
//為什麼這裡可以取得 props.navigator?請看上文:
//<Component {...route.params} navigator={navigator} />
//這裡傳遞了navigator作為props
//這裡對navigator進行了判斷 如果navigator(導航器)物件存在的情況下 在進行操作
if (navigator) {
navigator.pop();
}
}
_renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}/>
);
}
//建立點選區域 當點選的時候 進行 頁面的跳轉 也就是對navigator的引數進行設定 使其跳轉到 第二個介面
render() {
return (
<View >
<TouchableOpacity onPress={this._pressButton.bind(this)}
style={{flexDirection:'row' ,alignItems: 'center'}}>
<Text style={styles.red}>點我跳回去</Text>
</TouchableOpacity>
<Text style={styles.red}>我是第三頁面</Text>
</View>
);
}
}
const styles=StyleSheet.create({
red:{
fontSize:40,
fontWeight:'bold',
color:'red'
},
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
paddingTop:5,
paddingLeft:5,
backgroundColor:'#999999',
paddingRight:5,
paddingBottom:5,
},
page: {
width: deviceWidth,//裝置寬(只是一種實現,此處多餘)
flex: 1,
height: 130,
resizeMode: 'stretch'
},
});
這個元件中只有一個重要程式碼
navigator.pop(); //返回上一個元件
恩!到此為止,一個react-native的原生的頁面的跳轉就完成,還加入一些返回的細節。(MyToast是橋接的android的Toast。實際使用的過程可以直接去掉,以免報錯)
相關推薦
React-native頁面跳轉傳值實現
首先是index.android.js 我們需要用到Navigator來進行頁面的跳轉,所有的js檔案處於同一目錄下面, 在FirstPageComponent頁面中我們需要定義好引數: constructor(props) { super(props);
React native 介面跳轉原生Android介面
最近在學習React native,正好看到RN介面跳轉原生的介面,但是根據網上的來 總是會報undefined is not an object (evaluating ‘NativeModules.IntentModule.startActivityFrom
React-Native 原生跳轉不同的RN介面的實現思路
最近在研究React-Native開發App,準備把RN運用到自己的畢業設計中,因為以前做過一個購物社交類的App,但是沒有做完,所以就想把它完善一下作為畢業設計,而RN可以熱更新,所以對於購物類app中的一些時常變化的商品介紹列表就準備用一下RN來試試了。
react-native的跳轉功能Navigator
最近在學習react-native,因為工作要用這個技術做APP。他是即react之後的升級版。裡面有很多的元件可以使用,但是都是基於JS之上的。我覺得rn用自己寫的js封裝起來還是不錯的。畢竟是原聲的嘛。 今天介紹下跳轉功能的使用吧! 1.首先匯入這個元件 2
react native 原生頁面跳轉到React頁面,react頁面回退到原生頁面實現。
1.最新實現方式,只要繼承ReactActivity,重寫getMainComponentName()方法。內部已實現。2.以前實現方式,實現DefaultHardwareBackBtnHandler介面,在ReactInstanceManager 設定DefaultHard
react-native最新的ES6基於頁面跳轉和傳值
引導頁面:最新的react-native頁面跳轉和傳值 /** * Sample React Native App * https://github.com/facebook/react-native */ import React, { Ap
【React Native入門系列文章 七】頁面跳轉
本文學習React Native如何進行頁面跳轉,以及頁面跳轉間引數傳遞。 目前React Native中文網主推的頁面跳轉方式為React Navigation。它的使用非常簡單: 1、安裝導航庫:npm install --save react-navigat
react-native頁面的跳轉
react-native的頁面跳轉 引言 :react-native出來也有一段時間了,一直只是聽說react-nativa是如何的好,能夠實現跨平臺(android、IOS).一直沒有去主動交接它。直到最近,公司為了節省後期的維護成本,也同時將現有的專案進行
混合開發的大趨勢之一React Native之頁面跳轉
最近事情有點多,沒有長時間地連貫學習,文章也停了一個多禮拜,愧疚,有時間還是繼續學習,繼續寫! 廢話不多,貼下執行效果 登陸前 登入成功後 rn的頁面跳轉都是交由Navigator來處理,我們看下文件瞭解這個常用的元件
react專案中頁面跳轉、重新整理及獲取網路狀態
// 頁面跳轉 window.location.href = 'http://speedtest.wangxiaotong.com/' // 頁面重新整理 window.location.reload() // 獲取當前網路狀態,只能判斷使用者電腦有沒有斷網(包括無線和有線),有網為true,沒有網
ReactJS與antdDesign中頁面跳轉問題(React Router)
通過側邊欄導航Menu的Menu.Item控制Content部分內容的變化。 先安裝React Router npm install react-router --save-dev 在js中引
react-router 路由控制頁面跳轉
剛接觸react,路由使用的react-router 4.0。對於路由在頁面中的跳轉,使用了兩種方法 1,使用widthRouter,他是一個高階元件,他提供了history讓我們使用。 eg:返回上一個頁面,下面是我的實現程式碼。 import React,{Comp
React學習(3)——Router路由的使用和頁面跳轉
React-Router的中文文件可以參照如下連結: http://react-guide.github.io/react-router-cn/docs/Introduction.html &nbs
react +webpack+express router實現登入與頁面跳轉
5、express app 利用passport實現登入驗證與跳轉 var express = require('express'); var app= express(); var passport = require('passport'); var Strategy = require('passp
React-Router傳參取值頁面跳轉
專案結構 image.png -RouterMap頁面,所有的頁面都必須註冊路由 import React from 'react' import { Router, Route,
AngularJS路由實現單頁面跳轉
href vid 左邊欄 ref 按順序 -1 生活用品 func 為我 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl
php中實現頁面跳轉的幾種方式
腳本 timeout location clas replace asc idt lee 實現 親測,not復制粘貼 PHP中實現頁面跳轉有一下幾種方式,看了幾個人寫的不是很條理,自己整理一下 在PHP腳本代碼中實現 <?php header("locati
ionic2 頁面跳轉 push() pop() NavController,navParams
htm script mark int popup struct from navi lin 新建頁面http://zyyapp.com/post/185.html Ionic 2之頁面堆棧 :http://blog.csdn.net/u010730126/articl
jquery頁面跳轉導航變色,刷新後依然存在
ctu contacts new each menu [0 oca function == jquery代碼: <script> $(document).ready(function () { //$(".me
5S後頁面跳轉
href javascrip asc count xhtml www XML org oca <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh