ReactNative實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

摘要PAGEPAGE10第一節(jié)緒論1.1移動(dòng)開發(fā)現(xiàn)狀1.2ReactNative簡(jiǎn)介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ā)框架，相對(duì)于其他的hybrid的框架，其所面向的工作環(huán)境已經(jīng)跳出了瀏覽器環(huán)境，能做到既擁有原生native的交互體驗(yàn)，又能夠保持web的高效與靈活，因此發(fā)布起就引起了業(yè)內(nèi)極大的關(guān)注，目前已經(jīng)可支持iOS和Andorid兩套平臺(tái)。其優(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等國(guó)外知名網(wǎng)站，而國(guó)內(nèi)也有攜程，淘寶，天貓，支付寶，京東，微信，QQ等也都用到了RN技術(shù)，說明這個(gè)技術(shù)發(fā)展前景遼闊。1.3運(yùn)行環(huán)境Windows無(wú)法安裝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í)語(yǔ)法檢測(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ī)身。1.4ReactNative優(yōu)點(diǎn)不用Webview，解決Webview交互和性能問題采用了類似cssflexbox的布局理念完成頁(yè)面布局。有較強(qiáng)的擴(kuò)展性，Native端提供的是基本控件，JS可以自由組合使用可以直接使用Native原生的動(dòng)畫。無(wú)需編譯,可以通過更新遠(yuǎn)端JS，直接更新app，不過這快成為各家大型Nativeapp的標(biāo)配了。多數(shù)布局代碼都是JSX，所有Native組件都是標(biāo)簽化的，這對(duì)于前端程序員來(lái)說，降低了不少學(xué)習(xí)成本，也大大減少了代碼量。1.5ReactNative缺點(diǎn)擴(kuò)展性仍然不如web端，不如直接寫Nativecode。從Native到Web，要做很多概念轉(zhuǎn)換，以及思維轉(zhuǎn)換。ReactNative仍然很不完善。文檔還不全，目前未出現(xiàn)正式1.0版本。

第二節(jié)ReactNative實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)2.1跳轉(zhuǎn)當(dāng)前情況react-native從開源至今，因?yàn)楫吘共皇窃?，所以一直存在幾個(gè)無(wú)法解決的問題，其中包括導(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)航條，用來(lái)跳轉(zhuǎn)頁(yè)面和傳遞參數(shù)。TabNavigator類似底部標(biāo)簽欄，用來(lái)區(qū)分模塊。DrawerNavigator抽屜，類似從App左側(cè)滑出一個(gè)頁(yè)面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)該使用該庫(kù)中提供的動(dòng)作創(chuàng)建器。支持以下操作：Navigate：跳轉(zhuǎn)到另一個(gè)頁(yè)面。Back：返回上一個(gè)界面。SetParams：給定路徑設(shè)置參數(shù)。Init：初始化狀態(tài)。3.2StackNavigator頂部導(dǎo)航欄頂部導(dǎo)航條，用來(lái)跳轉(zhuǎn)頁(yè)面和傳遞參數(shù)，支持app框架，通過StackNavigator將所有頁(yè)面連接一起，并完成基礎(chǔ)的跳轉(zhuǎn)，以及數(shù)據(jù)傳遞3.2.1StackNavigator使用方法SecondScreen:{screen:Second,//跳轉(zhuǎn)屏幕navigationOptions:({navigation})=>({headerTitle:"第二個(gè)頁(yè)面",//導(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)簽欄，用來(lái)區(qū)分模塊。常見的如微信，底部的包括我的等頁(yè)面，點(diǎn)擊底部tab鍵完整頁(yè)面間的跳轉(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頁(yè) 圖3-4MAIN頁(yè)圖3-5USER頁(yè)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)前頁(yè)面返回到上一頁(yè)：//

返回上一頁(yè)

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è)頁(yè)面?zhèn)鬟^來(lái)的值=',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返回指定頁(yè)面4.3.1問題描述react-navigation是提供了goBack()到指定頁(yè)面的方法的，那就是在goBack()中添加一個(gè)參數(shù)，但當(dāng)你使用goBack('Main')的時(shí)候，你會(huì)發(fā)現(xiàn)并沒有跳轉(zhuǎn)，原因是react-navigation默認(rèn)goBack()中的參數(shù)是系統(tǒng)隨機(jī)分配的key，而不是手動(dòng)設(shè)置的routeName，而方法內(nèi)部又沒有提供可以獲得key