React-Native 知識點小結
阿新 • • 發佈:2019-01-01
安裝
- 要按官方文件操作,不要瞎百度,瞎按部落格操作
- 使用(react-native init 你的專案名字 –version 0.44.3 )生成對應版本的專案,不同版本有差異,初學者容易掉某明奇妙的坑裡,選擇你手裡教程對應的版本,拿官方文件做教程的選擇beta版本,不要選測試版本,不要選測試版本,不要選測試版本
- 專案目錄下執行命令 react-native run-ios (或者 react-native run-android )
專案結構
- 新建資料夾作為專案程式碼的存放資料夾,一般叫src(在專案的跟目錄下,是專案的根目錄,不是專案所在資料夾的根目錄,如果你不懂什麼叫專案的跟目錄,記得和node_modules平級就行)
- 新建資料夾用於存放公共圖片。支援[email protected]和[email protected]尾綴,會自動適應。圖片引用檔名不需要加[email protected],比如[email protected]只需要寫ic_photo.png就行
引用路徑
- ./是當前平級目錄,通過這個引用可以找你的兄弟。
- ../是向上一級目錄,也就是當前路徑的父級目錄。通過這個引用可以找你的叔叔們。一個../只代表向上跳一級,要找爺爺級請加兩個,也就是../../,以此類推
匯入元件
- 元件或者變數以及方法要想被其他檔案引用必須匯出 。也就是在宣告前面加上export
- 多個匯出可以用
module.exports = {
某元件名,
某變數名,
某方法名,
}
- export default 用作匯出修飾的使用時可以不需要引用,每個檔案只能有一個預設匯出的物件。
- js裡面萬事萬物皆是物件,是所有,是所有,是所有。不管是方法還是變數還是字串還是元件。
JSON
js裡面json文字就是個物件。不需要賦值不需要解析可以直接當做物件用
例如
var options = {
url: '/util/car/car_price',
method: 'POST',
data: `prov=${prov} &city=${city}&model=${modelID}`,
}
就可以直接用
options.method
來操作他的屬性method
所以你要宣告陣列可以直接寫一個數組的JSONARRAY變數
如
var list= [
'年利率', '月利率', '月供'
]
這裡的list就是陣列物件,而不是字串,要宣告字串請在兩端加上引號或者雙引號
所以網路請求返回過來的如果是json格式也是可以直接當做物件操作,不需要額外解析。哦,就是物件,不需要當做。
介面跳轉與傳值
- 跳轉
RN本質上是js。也就是前端那一套,沒有原生介面跳轉的概念,所有的介面跳轉本質上就是元件的替換。為了達到與原生一致的介面切換體驗,跳轉必須要藉助Navigator,Navigator可疊加使用,必須在跳轉前提前靜態宣告
const AppNavigator = StackNavigator({
Main: {screen: Main},
CarModelSelect: {
screen: CarModelSelect,
},
CityView: {
screen: CityView,
},
ResultView: {
screen: ResultView,
},
});
跳轉時呼叫
this.props.navigation('CarModelSelect')
程式碼主動返回上一個介面呼叫
this.props.navigation.goBack()
這裡的navigation就是控制跳轉的Navigator的物件,感興趣的同學可以打印出來觀察。js可以直接列印物件,console.debug(物件)
就可以
- 傳值
this.props.navigation()
物件方法的第一個引數就是要跳轉介面的路由路徑,第二個引數就是需要傳遞的值物件
this.props.navigation('CarModelSelect', {title:"標題"
modelSelect: ( name) => {
}
})
上面這段程式碼演示了傳遞title這個欄位和modelSelect(name)這個方法的傳遞。前面說了。js裡啥都是物件,所以方法自然也是物件。也可以當做值直接傳遞過去,所以介面之間的方法回撥大家應該知道怎麼使用了
- 取值
var title = this.props.navigation.state.params.title
this.props.navigation.state.params.modelSelect("小明")
上面程式碼演示瞭如何取得之前介面傳遞過來的title值和如何呼叫回撥方法modelSelect(name)
- 當前介面繼續跳轉其他介面
同樣的呼叫
this.props.navigation('另一個介面的路由路徑')
this.state
介面上的一切現實變化都需要通過this.state來控制。this.state裡的值改變了自然會重新整理與他繫結的介面屬性(文字,位置,高寬,動畫等)
- this.setState();
setState不是立即執行的,延遲更新的原因在於—state是非同步執行的,只有render發生變化的時候才觸發this.setState()
列表
- SectionList與FlatList所需要的資料來源的格式是必須的。也就是必須要有key與data欄位。當然可以通過
keyExtractor={(item, index) => item.city_name}
方法來指定key。但是沒有方法來指定data,由於這個奇葩的設計。大部分實際情況下需要手動格式化你的資料來源成[“key”:”key”,”data”:[]]的格式
- getItemLayout可以計算列表高度。推薦實現此方法,實際使用中你不實現列表載入的效能差的爆表,經常不忍直視。
- 分隔線 ItemSeparatorComponent可以用來做垂直分隔線。不能用來做水平分隔線,所以多列的情況你可以指定每個item的左邊距然後給列表加個paddingRight來實現水平分割線。(coder的智慧是無限滴)
有什麼建議的可以留言喔
如果我的部落格對您有幫助,請留言鼓勵下或者點個贊吧!