ReactNative技術(shù)實(shí)現(xiàn)頁面跳轉(zhuǎn)

目錄目錄 第一節(jié)緒論1.1移動(dòng)開發(fā)現(xiàn)狀1.2ReactNative簡介2015年Facebook發(fā)布的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，采用JavaScript進(jìn)行原生應(yīng)用開發(fā)，兼顧了Web開發(fā)效率和原生應(yīng)用性能，ReactNative是facebook開源的一款跨平臺(tái)開發(fā)框架，它已經(jīng)跳出了瀏覽器環(huán)境，能做到既擁有原生native的交互體驗(yàn)，又能夠保持web的高效與靈活，因此發(fā)布起就引起了業(yè)內(nèi)極大的關(guān)注，目前已經(jīng)支持iOS和Andorid的開發(fā)。其優(yōu)點(diǎn)包括，學(xué)習(xí)成本抵，多段代碼復(fù)用，接近原生的性能，社區(qū)活躍。而其框架，底端有JS/JSX,而中部由VirtualDOM，而其開發(fā)環(huán)境包括IOS，Android，Windows。但也有他的局限，比如不支持web端不能三端打通，更新升級(jí)依賴三方框架，原生能力有限不支持多媒體，復(fù)雜場(chǎng)景下內(nèi)存性能有瓶頸。使用app的開發(fā)的有Facebook，YouTube等國外知名網(wǎng)站，而國內(nèi)也有攜程，淘寶，天貓，支付寶，京東，微信，QQ等也都用到了RN技術(shù)，說明這個(gè)技術(shù)發(fā)展前景遼闊。1.3運(yùn)行環(huán)境Windows無法安裝IOS版本，以下為Android版本的安裝。Python2：目前不支持Python3版本。 Node：提供JS代碼編譯環(huán)境。AndroidStudio:AndroidStudio包含了運(yùn)行和測(cè)試ReactNative應(yīng)用所需的AndroidSDK和模擬器。Chrome：谷歌瀏覽器，可做布局效果預(yù)覽和代碼斷點(diǎn)調(diào)試。

IDE：推薦使用webstorm,能非常方便的集成各種工具,同時(shí)語法檢測(cè)和智能提醒也很完備。測(cè)試安裝:react-nativeinitHellocdHelloreact-nativerun-android訪問http://localhost:8081/debugger-ui并按下F12進(jìn)行觀察布局和代碼debug調(diào)試打開調(diào)試菜單時(shí)可以點(diǎn)擊menu鍵或者輕輕搖動(dòng)機(jī)身。

第二節(jié)ReactNative實(shí)現(xiàn)頁面跳轉(zhuǎn)2.1跳轉(zhuǎn)當(dāng)前情況react-native從開源至今，因?yàn)楫吘共皇窃?，所以一直存在幾個(gè)無法解決的問題，其中包括導(dǎo)航跳轉(zhuǎn)不流暢的問題等等。

終于facebook找出替代方案，在前一段時(shí)間開始推薦使用react-navigation，并且在0.44發(fā)布的時(shí)將之前一直存在的Navigator廢棄了。2.2Navigator缺點(diǎn)要在第一個(gè)界面聲明，否則獲取不到對(duì)象；列表服用問題；跳轉(zhuǎn)不流暢。2.3react-navigation優(yōu)點(diǎn)react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。雖然現(xiàn)在功能還不完善，但基本是可以在項(xiàng)目中推薦使用的2.4react-navigation屬性react-navigation分為三個(gè)部分。StackNavigator類似頂部導(dǎo)航條，用來跳轉(zhuǎn)頁面和傳遞參數(shù)。TabNavigator類似底部標(biāo)簽欄，用來區(qū)分模塊。DrawerNavigator抽屜，類似從App左側(cè)滑出一個(gè)頁面2.5使用方式 yarnaddreact-navigation或npminstall--savereact-navigation

第三節(jié)React-navigation屬性及基本用法3.1NavigationActionsreference參考通用所有導(dǎo)航操作都返回一個(gè)可以使用導(dǎo)航.Debug（）方法發(fā)送到路由器的對(duì)象。注意，如果您想發(fā)送反應(yīng)導(dǎo)航操作，則應(yīng)該使用該庫中提供的動(dòng)作創(chuàng)建器。支持以下操作：Navigate：跳轉(zhuǎn)到另一個(gè)頁面。Back：返回上一個(gè)界面。SetParams：給定路徑設(shè)置參數(shù)。Init：初始化狀態(tài)。3.2StackNavigator頂部導(dǎo)航欄頂部導(dǎo)航條，用來跳轉(zhuǎn)頁面和傳遞參數(shù)，支持app框架，通過StackNavigator將所有頁面連接一起，并完成基礎(chǔ)的跳轉(zhuǎn)，以及數(shù)據(jù)傳遞3.2.1StackNavigator使用方法SecondScreen:{screen:Second,//跳轉(zhuǎn)屏幕navigationOptions:({navigation})=>({headerTitle:"第二個(gè)頁面",//導(dǎo)航標(biāo)題headerStyle{backgroundColor:'#1A7DE3'},//導(dǎo)航欄樣式headerTitleStyle:{color:'#fff'}，//導(dǎo)航標(biāo)題樣式headerLeft:<TouchableOpacity//導(dǎo)航左側(cè)onPress={()=>{navigation.goBack()}}><Viewstyle={{paddingLeft:15,paddingRight:15}}><Imagesource={require('./imgs/icon_left.png')}/></View></TouchableOpacity>,})}3.2.2StackNavigator實(shí)現(xiàn)效果圖3-1第一個(gè)界面圖3-2第二個(gè)界面 3.3TabNavigator底部標(biāo)簽欄底部標(biāo)簽欄，用來區(qū)分模塊。常見的如微信，底部的包括我的等頁面，點(diǎn)擊底部tab鍵完整頁面間的跳轉(zhuǎn)3.3.1TabNavigator使用方法{Home:{//屏幕screen:HomeScreen,navigationOptions:({navigation})=>({tabBarLabel:'Home'}),//屏幕名稱{tabBarPosition:'bottom',//tabbar位置swipeEnabled:false,//是否允許在標(biāo)簽之間進(jìn)行滑動(dòng)animationEnabled:false,//是否在更改標(biāo)簽時(shí)顯示動(dòng)畫lazy:true,//是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽initialRouteName:'Main',//默認(rèn)打開tabBarOptions:{//標(biāo)簽欄的屬性activeTintColor:'#06c1ae',//活躍狀態(tài)inactiveTintColor:'#979797',//非活躍狀態(tài)labelStyle:{fontSize:20}}}//文字大小3.3.2TabNavigator屬性介紹圖3-3HOME頁 圖3-4MAIN頁圖3-5USER頁3.4界面間跳轉(zhuǎn)、傳值、取值3.4.1通過navigate函數(shù)實(shí)現(xiàn)界面之間跳轉(zhuǎn)：ps.navigation.navigate('Mine');

參數(shù)為我們?cè)赟tackNavigator注冊(cè)界面組件時(shí)的名稱。同樣也可以從當(dāng)前頁面返回到上一頁：//

返回上一頁

ps.navigation.goBack();

3.4.2跳轉(zhuǎn)時(shí)傳值ps.navigation.navigate('Mine',{info:'傳值過去'});

第一個(gè)參數(shù)同樣為要跳轉(zhuǎn)的界面組件名稱，第二個(gè)參數(shù)為要傳遞的參數(shù)，info可以理解為key，后面即傳遞的參數(shù)獲取值{}

實(shí)現(xiàn)代碼發(fā)送：constnavigation=ps.navigation;

navigation.navigate('SecondScreen',obj);接受：const{navigate,goBack,state}=ps.navigation; ps.navigation.state.params實(shí)現(xiàn)效果圖3-6第一個(gè)界面 圖3-7第二個(gè)界面3.5回調(diào)傳值3.5.1實(shí)現(xiàn)代碼發(fā)送：const{navigate,goBack,state}=ps.navigation;

state.params[1](msg);

goBack();接受：callback=(data)=>{

console.log('第二個(gè)頁面?zhèn)鬟^來的值=',data);

this.setState({

data:data

})}3.5.2實(shí)現(xiàn)效果圖3-8第二個(gè)界面 圖3-9第一個(gè)界面3.6導(dǎo)航欄返回鍵3.6.1實(shí)現(xiàn)代碼： headerLeft:<TouchableOpacityunderlayColor="rgba(34,26,38,0.1)"onPress={()=>{navigation.goBack()}}><Imagestyle={{marginLeft:15}}source={require('../../images/icon_left.png')}/></TouchableOpacity>第四節(jié)React-navigation常見問題及解決4.1導(dǎo)航欄傳參4.1.1問題描述app實(shí)現(xiàn)過程中，發(fā)現(xiàn)要通過頂部導(dǎo)航欄進(jìn)行傳參，跳轉(zhuǎn)等等函數(shù)操作，而導(dǎo)航欄并不支持函數(shù)，所以由一下方式解決。4.1.2實(shí)現(xiàn)代碼headerLeft: <TouchableOpacity

onPress={()=> navigation.state.params.navmigatorLeftPress()}> <Viewstyle={{paddingLeft:15,paddingRight:15}}> <Imagesource={require('../images/icon_left.png')}/> </View></TouchableOpacity>,ps.navigation.setParams({

navigatorLeftPress:this.goBack,

});this.goBack=this.goBack.bind(this);const{navigate,goBack,state}=ps.navigation;

state.params[1](msg);

goBack();4.2點(diǎn)擊重復(fù)跳轉(zhuǎn)的解決辦法4.2.1問題描述react-navigation在進(jìn)行跳轉(zhuǎn)時(shí)，可能由于網(wǎng)絡(luò)等原因，點(diǎn)擊一次過后，并未實(shí)現(xiàn)跳轉(zhuǎn)，而在你多次點(diǎn)擊后，會(huì)出現(xiàn)多次跳轉(zhuǎn)的現(xiàn)象。4.2.2解決方法修改react-navigation目錄下，scr文件夾中的addNavigationHelpers.js文件,修改源碼。4.2.3實(shí)現(xiàn)代碼：importtype{ NavigationProp, NavigationParams, NavigationScreenProp, NavigationNavigateAction,}from'./TypeDefinition';importNavigationActionsfrom'./NavigationActions';importinvariantfrom'./utils/invariant';exportdefaultfunction<S:{}>( navigation:NavigationProp<S>):NavigationScreenProp<S>{ letdebounce=true; return{ ...navigation, goBack:(key?:?string):boolean=>{ letactualizedKey:?string=key; if(key===undefined&&navigation.state.key){ invariant( typeofnavigation.state.key==='string', 'keyshouldbeastring' ); actualizedKey=navigation.state.key; } returnnavigation.dispatch( NavigationActions.back({key:actualizedKey}) ); }, navigate:( routeName:string, params?:NavigationParams, action?:NavigationNavigateAction ):boolean=>{ If(debounce){ debounce=false; navigation.dispatch( NavigationActions.navigate({ routeName, params, action, }), );setTimeout( ()=>{ debounce=true; }, 500,);returntrue;}returnfalse;},setParams:(params:NavigationParams):boolean=>{invariant(navigation.state.key&&typeofnavigation.state.key==='string','setParamscannotbecalledbyrootnavigator');constkey=navigation.state.key;returnnavigation.dispatch(NavigationActions.setParams({params,key}));},};}4.3關(guān)于goBack返回指定頁面4.3.1問題描述react-navigation提供了goBack()到指定頁面的方法，即在goBack()中添加一個(gè)參數(shù)，但當(dāng)你使用goBack('頁面名稱')的時(shí)候，并沒有跳轉(zhuǎn)，原因是react-navigation默認(rèn)goBack()中的參數(shù)是系統(tǒng)隨機(jī)分配的key，而不是手動(dòng)設(shè)置的routeName，所以這里只能通過修改源碼將key換成routeName了。4.3.2解決方式把項(xiàng)目/node_modules/react-navigation/src/routers/StackRouter.js文件里的修改源碼 if(action.type===NavigationActions.BACK){ letbackRouteIndex=null; if(action.key){ constbackRoute=state.routes.find( console.log('backRoute=====',backRoute); backRouteIndex=state.routes.indexOf(backRoute); console.log('backRoute=====',backRouteIndex); } if(backRouteIndex==null){ returnStateUtils.pop(state);} if(backRouteIndex>=0){ return{ ...state, routes:state.routes.slice(0,backRouteIndex+1), index:backRouteIndex-1+1,};}4.4安卓中，使用輸入框的時(shí)鍵盤會(huì)彈出4.4.1問題描述安卓中，當(dāng)你點(diǎn)擊輸入框，自動(dòng)彈出軟鍵盤，而彈出的鍵盤會(huì)遮擋住所輸入的地方，影響用戶輸入以及觀看自己所輸入的內(nèi)容 4.4.2解決方式在android指定路徑下中，添加一句話路徑：android/app/src/main/AndroidManifest.xml中，添加android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

參考文獻(xiàn)[1]闕喜濤，ReactNative跨平臺(tái)移動(dòng)應(yīng)用開發(fā)（第二版），[M]，北京：電子工業(yè)出版社，2017。[2]向治洪，ReactNative移動(dòng)開發(fā)實(shí)戰(zhàn)，[M]，北京：人民郵電出版社，2017。[3]袁林，ReactNative移動(dòng)開發(fā)實(shí)戰(zhàn)，[M]，北京：機(jī)械工業(yè)出版社，2017。[4]陳屹，深入React技術(shù)棧，[M]，北京：人民郵電出版社，2017。[5]張益琿，ReactNative全教程：移動(dòng)端跨平臺(tái)應(yīng)用開發(fā)，[M]，北京：清華大學(xué)出版社，2018。[6]肖睿，王曙光，南洋等，前端開發(fā)工程師系列：ReactNative企業(yè)實(shí)戰(zhàn)，[M]，北京：中國水利水電出版社，2017。[7]程墨，深入淺出React和Redux，[M]，北京：機(jī)械工業(yè)出版社，2017。[8][美]艾森曼（BonnieEisenman）著，黃為偉譯，ReactNative開發(fā)指南，[M]，北京：人民郵電出版社，2016。[9][美]Kevin，Hoffman（凱文·霍夫曼），Dan，Nemeth（丹·內(nèi)梅斯）著，CloudNativeGo：構(gòu)建基于Go和React的云原生Web應(yīng)用與微服務(wù)，[M]，北京：電子工業(yè)出版社，2017。[10][澳]亞歷山大·麥克勞德（AlexanderMcLeod）著，林昊譯，ReactNative應(yīng)用開發(fā)實(shí)例解析，[M]，北京：人民郵電出版社，2017。[11][越南]TruongHoangDung（張皇容）著，奇舞團(tuán)譯，ReactNative：用JavaScript開發(fā)移動(dòng)應(yīng)用，[M]，北京：電子工業(yè)出版社，2015。[12]王利華魏曉軍馮誠祺著，REACTNATIVE入門與實(shí)戰(zhàn)，[M]，北京：人民郵電出版社，2016。[13][美]CássiodeSousaAntonio著，杜偉譯，React開發(fā)實(shí)戰(zhàn)，[M]，北京：清華大學(xué)出版社，2017。[14]張軒著，React全棧：Redux+Flux+webpack+Babel整合開發(fā)，[M]，北京：電子工業(yè)出版社，2016。[15]徐超著，React進(jìn)階之路，[M]，北京：清華大學(xué)出版社，2018。附 錄附錄一：ReactNative發(fā)展趨勢(shì)圖1ReactNative發(fā)展趨勢(shì)1圖2ReactNative發(fā)展趨勢(shì)2附錄二：react-navigation部分代碼主頁/***@gxl*/classAppextendsComponent{staticnavigationOptions={header:null}constructor(props){super(props);this.state={message:'',data:'',};}//點(diǎn)擊跳轉(zhuǎn)下一個(gè)界面jump=()=>{console.log('發(fā)送的數(shù)據(jù)=',this.state.message);letmsg=this.state.message;letobj=[msg,callback=(data)=>{console.log('第二個(gè)頁面?zhèn)鬟^來的值=',data);//打印值為：'傳過來的msg'this.setState({data:data})}];constnavigation=ps.navigation;navigation.navigate('SecondScreen',obj);//傳遞數(shù)據(jù)};render(){return(<Viewstyle={styles.container}><Textstyle={styles.welcome}>發(fā)送的數(shù)據(jù)</Text><TextInputstyle={styles.textIn}underlineColorAndroid="transparent"onChangeText={(text)=>{this.setState({message:text})}}value={this.state.text}/><Textstyle={styles.welcome}>接收的數(shù)據(jù)</Text><Textstyle={styles.instructions}>{this.state.data}</Text><ButtononPress={()=>this.jump()}title='點(diǎn)擊跳轉(zhuǎn)'/></View>);}}exportdefaultApp;跳轉(zhuǎn)第二頁/***@gxl*/classSecondextendsComponent{constructor(props){super(props);this.state={message:'',};}componentWillMount(){cons