一、ReactNavigation中如何實現頁面跳轉
因為每個屏幕組件(具有路由地址的組件)都是由App根組件自動創建並掛載的,App組件
在創建屏幕組件時,會自動傳遞進來一個props: navigation
從當前屏幕跳轉到其他屏幕:
this.props.navigation.navigate('屏幕地址')
注意:默認情況下,Image沒有onPress事件,如果想要被點擊實現跳轉,
需要封裝到"觸摸反饋組件",如
<TouchableOpacity onPress={ }>
<Image/>
</TouchableOpacity>
二、ReactNavigation中如何實現跳轉傳參
回憶:基於瀏覽器的Web應用中如何傳參?
Angular中:
路由詞典:{path:'product/detail/:pid',component:.... }
執行跳轉:<a routerLink="product/details/15">
注意:RN應用根本沒有瀏覽器,沒有地址欄,沒有/15!
RN中的路由傳參不需要修改路由詞典:
前一個組件跳轉時提供路由參數:
this.props.navigation.navigate('目標地址',{pid:13,age:30})
后一個組件加載完成時讀取路由參數:
this.props.navigation.state.params ------------ { pid:13,age:30 }
或者
this.props.navigation.getParam( 'pid' , 99) //99表示默認參數值
class App extends React.Component{
render(){
return (
<View>
<ScreenHeader>
{讀取LoginScreen.navigationOptions來填充頁頭 }
</ScreenHeader>
<ContentOutlet>
{
if(當前客戶端想訪問login地址的話){
return <LoginScreen navigation={...}/>
}
}
</ContentOutlet>
</View>
)
}
}
三、ReactNavigation中如何配置頁頭
①僅指定標題欄文字
static navigationOptions = {
title: ' 標題欄文字 '
}
②指定復雜的標題欄組件
static navigationOptions ={
headerTitle:<Any/>
headerLeft:<Any/>
headerRight:<Any/>
}
可以為headerTitle、headerLeft、headerRight屬性賦值為任意組件/自定義組件,實現頁頭
自定義的功能;
此外,如果需要在頁頭中使用navigation對象,不能直接使用this.props.navigation(靜態成員中
不能使用this),可以使用
static navigationOptions =((obj)={
return {
title:'商品編號:' +obj.navigation.getParam('pid') +'的詳情'
}
})
四、前端可用的異步請求技術有哪些?
①原生XHR:直接,但可能產生回調地獄
②jQuery.ajax():簡單,但可能產生回調地獄
③Axios:功能強大,基於Promise
④HttpClient:功能強大,基於觀察者模式
----------------------------------------------------
⑤Fetch:W3C的新標准,有望取代XHR
RN應用中沒有瀏覽器,沒有原生XHR技術;但是RN底層根據W3C Fetch標准,
提供了一套完整的Fetch API.
FetchAPI的使用方法:
發起GET請求:
fetch(url).then((res)=>{
return res.json() //等待下載完全響應消息主體,解析為JS對象
}).then((body)=>{
//body就是響應主體
}).catch((err)=>{
})
發起POST請求:
let options ={
methods:'POST',
headers:{},
body:'k=v&k=v'
}
fetch(url).then((res)=>{
return res.json() //等待下載完全響應消息主體,解析為JS對象
}).then((body)=>{
//body就是響應主體
}).catch((err)=>{
})
2.小知識:如何在海量的代碼快速定位錯誤 ------ 調試技巧?
增量調試:注釋掉最新添加的功能,如果沒有錯誤了,說明最新添加的代碼有問題;
如果仍舊有錯,說明錯誤存在於之前的代碼中;繼續注釋掉此新增加的功能....
功能1:
功能2:
//功能3:
//功能4:
3.如何在RN中實現類似於Web中頂部/底部固定效果?
要點:
①父容器<View>必須設定height,獲取設定高度占比flex
②ScrollView天然就會占用所有可用空間,故可省略flex
③固定在底部的元素只需要聲明在ScrollView下方
4.RN中如何獲取當前手機屏幕的尺寸?
import {Dimensions} from 'react-native'
獲取屏幕的寬:Dimensions.get('screen').width
獲取屏幕的高:Dimensions.get('screen').height
獲取窗口的寬:Dimensions.get('window').width
獲取窗口的高:Dimensions.get('window').height
提示:手機中window的寬和screen的寬;screen的高等於window
的高+狀態欄的高度.