開(kāi)課吧web全棧架構(gòu)師12期課件38rn第三節(jié)react native課程大綱

ReactReactNativeReactNative課堂目App導(dǎo)航框架設(shè)設(shè)計(jì)歡迎頁(yè)進(jìn)入主頁(yè)導(dǎo)App導(dǎo)歡迎頁(yè)面5秒后進(jìn)入主設(shè)計(jì)一個(gè)轉(zhuǎn)場(chǎng)工具類歡迎頁(yè)改主頁(yè)設(shè)計(jì)底部導(dǎo)ReduxReactNavigation結(jié)合集成第一步：安裝s第二步：配置n第四步：在組件中應(yīng)案例：使用react-navigaton+redux修改狀態(tài)欄顏色創(chuàng)建Actions/theme創(chuàng)建Reducer/themeRN網(wǎng)絡(luò)編數(shù)據(jù)刪除數(shù)離線緩存框架設(shè)校驗(yàn)時(shí)完整代碼實(shí)課前回ReactNavigationReactNavigation概念與屬性介紹課堂目掌握reactnavigation了解redux在RN項(xiàng)目（使用reactnavigation）中的集成方式App仿主流APP設(shè)計(jì)一個(gè)導(dǎo)航歡迎頁(yè)面設(shè)importimportReact,{Component}fromimport{ tform,StyleSheet,Text,View}from"react-native";exportdefaultclass ePageextendsComponent{{return<View<Texte}conststyles=StyleSheet.create({{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{textAlign:"center",margin:10App主頁(yè)設(shè)importimportReact,{Component}fromimport tform,StyleSheet,Text,View}from"react-exportdefaultclassHomePageextendsComponent{{super(props);console.disableYellowBox=true;}render(){return<View<Texteto}}conststyles=StyleSheet.create({{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{textAlign:"center",margin:10}詳情頁(yè)importimportReact,{Component}fromimport tform,StyleSheet,Text,View}from"react-exportdefaultclassDetailPageextendsComponentrender()returnreturn<View<Texteto}}conststyles=StyleSheet.create({{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{textAlign:"center",margin:10}安裝reactnavigation與第圖標(biāo)庫(kù)react-native-vector-yarnyarnaddreact-navigation#orwithnpm#npminstall--savereact-yarnaddreact-native-gesture-handler#orwithnpm#npminstall--savereact-native-gesture-react-nativelinkreact-native-gesture-yarnaddreact-native-vector-react-nativelinkreact-native-vector-###記得關(guān)閉模擬?，服務(wù)?，重新啟動(dòng)項(xiàng)設(shè)計(jì)歡迎頁(yè)進(jìn)入主頁(yè)導(dǎo)#####}from"react-importHomePagefrom"../Pages/HomePage"; ePagefrom" importDetailPagefrom"../Pages/DetailPage";//定義歡迎constAppInitNavigator= ePage:{ navigationOptions:header:}}//定義主頁(yè)constAppMainNavigator=createStackNavigator({HomePage:{screen:HomePage,navigationOptions:{header:}DetailPage:{screen:}exportInit:AppInitNavigator,Main:App導(dǎo)importimportAppfrom歡迎頁(yè)面5秒后進(jìn)入主componentDidMountcomponentDidMount()this.timer=setTimeout((){const{navigation}=},}componentWillUnmount()this.timer&&設(shè)計(jì)一個(gè)轉(zhuǎn)場(chǎng)工具類exportdefaultclassexportdefaultclassNavigationUtil//跳轉(zhuǎn)到指定頁(yè)staticgoPage(props,page)constnavigation=NavigationUtil.navigation;navigation.navigate(page,{}//gostatic{const{navigation}=}//回到主 {const{navigation}=}}歡迎頁(yè)importimportNavigationUtilfromcomponentDidMount()this.timer=setTimeout((){navigationUtil.resetToHomePage({},}主頁(yè)設(shè)計(jì)底部導(dǎo)importimportReact,{Component}fromimport{ tform,StyleSheet,Text,View}from"react-native";import{}from"react-importIndexPagefrom"./IndexPage";importMyPagefrom"./MyPage";importFontAwesomefrom"react-native-vector-icons/FontAwesome";constTABS={IndexPage:{screen:IndexPage,navigationOptions:tabBarLabel:"首頁(yè)tabBarIcon:({tintColor,focused})=><FontAwesomename={"home"}size={26}style={{color:tintColor}})}MyPage:{screen:MyPage,navigationOptions:tabBarLabel:"我的tabBarIcon:({tintColor,focused})=><FontAwesomename={"user"}size={26}style={{color:tintColor}})}}exportdefaultclassHomePageextends{constructor(props){console.disableYellowBox=true;}}_TabNavigator()return}render()constTabs=this._TabNavigator();return<Tabs/>;}}conststyles=StyleSheet.create({{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{textAlign:"center",margin:10}Index頁(yè)面頂部導(dǎo)航設(shè)importimportReact,{Component}fromimport{ tform,StyleSheet,Text,View}from"react-import{}from"react-importNavigationUtilfromexportdefaultclassIndexPageextends{constructor(props){this.tabNames=["React}_genTabs(){consttabs={};this.tabNames.forEach((item,index)=>{tabs[`tab${index}`]={screen:props=><IndexTab{...props}tabName={item}/>,navigationOptions:{title:}return}render()constTabNavigatorcreateAppContainer(createMaterialTopTabNavigator(this._genTabs(),{{upperCaseLabel:false,scrollEnabled:true,}return<Viewstyle={{flex:1,marginTop:30<TabNavigator}}classIndexTabextends{render()const{tabName}=ps;return(<View<Text etotitle={"gotoDetailPage"}onPress={()=>{}}constconststylesStyleSheet.create({container:{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{fontSize:20,textAlign:"center",margin:10}Redux與ReactNavigation結(jié)合集ReduxReactNavigation有點(diǎn)復(fù)雜Redux是自頂向下管理一套狀態(tài)，ReactNavigation也是自頂向下管理一套狀態(tài)甚至頁(yè)面，這倆融合起來(lái)就有點(diǎn)了yarnaddyarnaddyarnaddreact-redux//因?yàn)閞edux其實(shí)是可以獨(dú)立運(yùn)行的js項(xiàng)目，但使用在react項(xiàng)目中，還需要yarnaddreact-navigation-redux-helpers//在使用ReactNavigation的項(xiàng)目中，想要集成redux就必須要引入react-navigation-redux-helpers這個(gè)庫(kù)importimport{connect}from"react-import{}from"react-navigation-redux-AppWithNavigationState，這個(gè)高階組件完成了navigationprop的替換，改成了使用redux修改AppNavitor為RootNavigator并不再默認(rèn)導(dǎo)exportconstRootNavigator=Init:AppInitNavigator,Main:AppMainNavigatorconstAppWithNavigationState=createReduxContainer(RootNavigator,是ReactNavigation還不能識(shí)別，所以還需要最后一步——?jiǎng)?chuàng)建一個(gè)中間件，把需要導(dǎo)航的組件exportconstexportconstmiddleware=createReactNavigationReduxMiddleware(state=>state.nav,然后使用Redux的connect函數(shù)再封裝一個(gè)高階組件，默認(rèn)//State//State到Props的映射constmapStateToProps=state{returnstate://使用Redux的connect函數(shù)再封裝一個(gè)高階組件,連接React組件與Reduxstoreexportdefaultconnect(mapStateToProps)(AppWithNavigationState);完整代}from"react-importHomePagefrom"../Pages/HomePage"; ePagefrom" importDetailPagefrom"../Pages/DetailPage";//引入import{connect}from"react-//reduxifyNavigator,react-navigation-redux-helpers3.0變更}from"react-navigation-redux-exportconst ="Init";//設(shè)置根路由constAppInitNavigatorcreateStackNavigator({ePage:{ navigationOptions:{header:null}}constAppMainNavigator=createStackNavigator({HomePage:{screen:HomePage,navigationOptions:{header:}DetailPage:{screen:}exportconstRootNavigator=Init:AppInitNavigator,Main:AppMainNavigator1.初始化react-navigation與redux的中間件該方法的一個(gè)很大的作用就是為reduxifyNavigator的key設(shè)置actionSubscribers(行為訂閱者//react-navigation-redux-hepers3.0變更,createRectNavigatonReduxMidleware數(shù)順序發(fā)生了變化exportconstmiddleware=createReactNavigationReduxMiddleware(state=>state.nav,/*2.將根導(dǎo)航?組件傳遞給reduxifyNavigator函數(shù)并返回一個(gè)將navigationstate和dispatch函數(shù)作為props的新組件使用createReduxContainer方法，將RootNavigator封裝成高階組這個(gè)高階組件完成了navigationprop的替換，改成了使用redux里的*constAppWithNavigationState=createReduxContainer(RootNavigator,//State到Props的映射constmapStateToProps=state{returnstate://使用Redux的connect函數(shù)再封裝一個(gè)高階組件,連接React組件與Reduxstoreexportdefaultconnect(mapStateToProps)(AppWithNavigationState);importimport{combineReducers}from"redux";importthemefrom"./theme";import ,RootNavigator}fromconstnavState /**上面的代碼創(chuàng)建了一個(gè)導(dǎo)航action(表 打)，那么我們就可以通過(guò)actionstate，通過(guò)方*法getStateForAction(action,*倆參數(shù)，一個(gè)是新的action，一個(gè)是當(dāng)前的導(dǎo)航state，返回新的狀態(tài)，當(dāng)沒(méi)有辦法執(zhí)行這個(gè)action的時(shí)候，就返回*null。constnavReducer=(state=navState,action)=>constnextState=RootNavigator.router.getStateForAction(action,如果`nextState`為null或未定義，只需返回原始`state`returnnextState||state;3.合并@type{Reducer<any>|Reducer<any,constindex=combineReducers({nav:theme:exportdefaultimportimport{applyMiddleware,createStore}from"redux";importreducersfrom"../Reducer";import{middleware}fromconstmiddlewares=*創(chuàng)建exportdefaultcreateStore(reducers,importimportReact,{Component}from'react';import{Provider}from'react-redux';importAppNavigatorfromimportstorefromtypeProps=exportdefaultclassAppextends{render()*將store傳遞給App框return<Provider}}搞定 創(chuàng)建###Types.js###Types.jsexportdefault{THEM_CHANGE:"THEM_CHANGE",THEM_INIT:"THEM_INIT"創(chuàng)建importimportTypesfromexportfunctiononThemeChange(theme){return{type:Types.THEM_CHANGE,theme:theme}創(chuàng)建importimportTypesfromconstdefaultState{theme:exportdefaultfunctiononAction(state=defaultState,{switch(action.type)return{theme:return}}在Reducer中聚constconstindex=combineReducers({nav:theme:訂閱importimportReact,{Component}fromimport{Button, tform,StyleSheet,Text,View}from"react-native";import{}from"react-importIndexTabfrom"../Pages/IndexTab";import{connect}from"react-redux";import{onThemeChange}fromimportnavigationUtilfrom"../Navigator/navigationUtil";classIndexPageextendsComponent{{super(props);this.tabNames=["ReactNative"}_genTabs(){consttabs={};this.tabNames.forEach((item,index)=>{tabs[`tab${index}`]={screen:props=><IndexTab{...props}tabName={item}/>,navigationOptions:{title:}return}render()constTabBackground=ps.theme;constTabNavigatorcreateAppContainer(createMaterialTopTabNavigator(this._genTabs(),{{tabStyle:{},upperCaseLabel:false,scrollEnabled:true,style:{//選項(xiàng)卡背backgroundColor:indicatorStyle:height:2,backgroundColor:labelStyle:fontSize:marginTop:marginBottom:}}return<Viewstyle={{flex:1,marginTop:30<TabNavigator}}conststylesStyleSheet.create({container:flexflex:justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{fontSize:20,textAlign:"center",margin:10}constmapStateToProps=state=>({theme:state.theme.themeexportdefault在上述代碼中我們訂閱了store中的ps.theme獲取到所訂閱的themestate了。importimportReact,{Component}fromimport{ tform,StyleSheet,Text,View}from"react-import{connect}from"react-import{onThemeChange}fromclassIndexTabextends{render()const{tabName}=ps;return(<View<Textetotitle={"gotoDetailPage"}onPress={()=>{navigationUtil.goPage(ps,onPress={()=>{//navigationUtil.goPage(ps,}}conststyles=StyleSheet.create({{flex:1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF"{textAlign:"center",margin:10}constmapDispatchToProps=dispatch=>({onThemeChange:theme=>dispatch(onThemeChange(theme))exportRN發(fā)起請(qǐng)要從任意地址獲取內(nèi)容的話，只需簡(jiǎn)單地將作為參數(shù)傳遞給fetch方法即可（fetch這個(gè)詞本身也就是獲取的意思）Fetch還有可選的第二個(gè)參數(shù)，可以用來(lái)定制HTTP請(qǐng)求一些參數(shù)。你可以指定header參數(shù)，或是指定使用POST方法，又或是提交數(shù)據(jù)等等：{method:'POST',headers:{Accept:'application/json','Content-Type':'application/json',JSON.stringify({firstParam:'yourValue',secondParam:ars中的Content-TypeCtt-Typey的格式也有區(qū)別。到底應(yīng)該采用什么樣的Content-Type取決于服務(wù)?端，所以請(qǐng)和服務(wù)?下{method:'POST',headers:{'Content-Type':'application/x-www-form-body:Fetch方返回一個(gè)Promise，這種模式可以簡(jiǎn)化異步風(fēng)格的代functionfunctiongetMoviesFromApiAsync(){returnfetch('.then((response)=>.then((responseJson){return.catch((error){ReactNativeES2017標(biāo)準(zhǔn)中的asyncawait語(yǔ)法注意這個(gè)方法前面有async關(guān)鍵asyncasyncfunction{try注意這里的await語(yǔ)句，其所在的函數(shù)必須有asyncletresponse=awaitfetch('letresponseJson=awaitresponse.json();returnresponseJson.movies;}catch{}}別忘了catch住fetch可能拋出的異常，否則出錯(cuò)時(shí)你可能看不到任何注意：使用Chrome調(diào)試目前無(wú)法觀測(cè)到ReactNative中的網(wǎng)絡(luò)請(qǐng)求，你可以使用第的react-重要,處理一的HTP狀態(tài)碼時(shí)，從ftch()的pomise不會(huì)被標(biāo)記為eject該HTTP404或50。相反，它會(huì)將omiseveslveok屬為fals被為eject。一次請(qǐng)求沒(méi)有調(diào)用ejecteslve情況下，再判斷sos.ktruletleturl=`http.then(response{if{return}thrownewError("Networkresponsewasnot.then(responseText{.catch(e{數(shù)據(jù)AsyncStorage是一個(gè)簡(jiǎn)單的、異步的、持久化的Key-Value系統(tǒng)，它對(duì)于App來(lái)說(shuō)是全局性的?？捎脕?lái)代替LocalStorage。我們推薦您在AsyncStorage的基礎(chǔ)上做一層抽象封裝，而不是直接使用AsyncStorage在iOS上，AsyncStorage在原生端的實(shí)現(xiàn)是把較小值存放在序列化的字典中，而把較大值寫(xiě)入單獨(dú)的文件。在Android上，AsyncStorage會(huì)嘗試使用RocksDB，或退而選擇。在新版本的RN中AS已經(jīng)從RN框架中移除了，使用第庫(kù) async-storage來(lái)替代。安##$yarnmunity/async-#$react-nativemunity/async-使importimportAsyncStoragefrommunity/async-數(shù)asyncasyncerr&&err&&awaiterr&&}}數(shù)asyncasyncerr&&err&&constvalue=awaitAsyncStorage.getItem(Key)err&&}}刪除數(shù)asyncasyncerr&&err&&awaiterr&&}}離線緩存有什么體的我制們線驗(yàn)。務(wù)戶離線緩存有什么數(shù)據(jù)的實(shí)時(shí)性要求不高離線緩存的策優(yōu)先從服務(wù)?獲取數(shù)據(jù)，數(shù)據(jù)返回后同步到本地?cái)?shù)據(jù)庫(kù)，如果發(fā)生網(wǎng)絡(luò)故障，才從本地獲取數(shù)離線緩存框架的優(yōu)先從本地實(shí)現(xiàn)思returnnewif(wrapdata&&DataStore.checkTimestampValid(wrapdata.timestamp)){}.catch(error{.then(data{.catch(error{}首先需要實(shí)現(xiàn)對(duì)數(shù)據(jù)的importimportAsyncStoragefrommunity/async-exportdefaultclassDataStore{saveData(url,data,callback){if(!data||!url)AsyncStorage.setItem(url,JSON.stringify(this._wrapData(data)),}}//上述代碼url作為緩存數(shù)據(jù)的key,接受一個(gè)Object的參數(shù)data為value,因?yàn)锳S是無(wú)法保存的，所以需要把它序列化成給離線的數(shù)據(jù)添加一個(gè)時(shí)間戳，便于計(jì)_wrapData_wrapData(data)return{data:data,timestamp:newDate().getTime()};////本地時(shí)間，推薦服務(wù)?間}獲取本地?cái)?shù)returnnewresolve(JSON.parse(result))//getItem獲取到的是string為}}獲取網(wǎng)絡(luò)數(shù)returnnewPromise((resolve,reject)=>{fetch(urreturn}thrownewError('networkresponsewasnot校驗(yàn)時(shí)staticstatic{constcurrentDate=newDate();consttargetDate=newDate();if(currentDate.getMonth()!==targetDate.getMonth())returnfalse;if(currentDate.getDate()!==targetDate.getDate())returnfalse;if(currentDate.getHours()-targetDate.getHours()>4)returnfalse;//有效期//if(currentDate.getMinutes()-targetDate.getMinutes()>1)returnfalse;returntrue;}完整代碼實(shí)importimportAsyncStoragefrommunity/async-exportdefaultclassDataStorestatic{constcurrentDate=newDate();consttargetDate=newDate();if(currentDate.getMonth()!==targetDate.getMonth())returnfalse;if