react-native初學者積累的經驗

寫在前面

1.react-native更新頻率快，很多時候遇到的問題百度上之前的解決方案並不能解決問題
2.開發環境的配置稍微麻煩些，但是官方文檔上寫得很詳細，跟着一步一步做不會有問題
3.很多第三方組件不能及時更新，兼容最新版本或者高版本的rn，有的第三方組件需要修改配置文件，android文件下有不同層級的同名文件，修改時需注意

一、練習項目

這是一個自己初步學習製作的一個小項目，主要是使用react-native-navgitation插件實現頁面的跳轉
項目代碼地址：https://github.com/jishuaizhen/react-native-demo.git
1.主頁面

2.訂單登錄頁面

3.個人中心頁面

二、登錄功能和支付功能

本項目只是實現簡單的頁面切換效果，登錄功能的話綁定提交事件將用戶名和密碼發到後臺請求驗證，防止用戶重複提交可利用定時器設置倒計時，支付功能的話可以利用react-native-puti-pay第三方插件，支付寶和微信都可以調用，前端只需要在調用的時候給後端提供金額即可

三、學習過程中的一些經驗

1.ScrollView
居中屬性需要在配置項中備註contentContainerStyle={styles.sviewin}

2.FlatList
renderItem配置函數
keyExtractor key值配置

3.View不支持點擊事件
可以替換爲TouchableOpacity等替代組件

4.Dimensions
獲取屏幕寬度的組件

5.react-native-navgitation
在導航中默認圖標是不顯示的，需要設置特定屬性
this.props.navigation.navigate(‘NewsPage’,{id:1})
接收數據let id = this.props.navigation.state.params.id;

6.react-native-swiper

7.AsyncStorage
AsyncStorage.setItem(‘hd’,‘123’)
AsyncStorage.getItem(‘hd’,(err,res)=>{alert(res)})

8.事件綁定this
onPress={this._onPress.bind(this)}

9.react-native-storage
封裝本地存儲的庫

10.react-native init ** --version 0.51.0
在初始化項目的時候確定版本

11.啓動頁
react-native-splash-screen
除了按照文檔配置，修改MainActivity.java並添加對應模塊
創建一個名爲 launch_screen.xml 的佈局文件，並添加啓動圖片

12.react-native-image-crop-picker
圖片選擇的第三方插件
在按照文檔配置完畢之後還需要手動配置一些文件

13.rn項目在運行是報出classpath解析錯誤
在android目錄下添加local.properties文件名文件，文件內容

//sdk.dir=(你電腦上android-sdk的路徑)
//我電腦上android-sdk的路徑爲“D:\android-sdk”，爲了防止“/”轉譯，所以我的文件內容是：
sdk.dir=D:\\android-sdk

這是錯誤的原因之一，如果不能解決百度谷歌其他解決方案

14.登錄的時候需要將登錄信息和token存儲在本地，本地的存取是異步操作，一般需要在存取完畢之後就行頁面的跳轉

15.react-native-puti-pay
微信和支付寶支付插件
需要去支付寶和微信平臺申請支付商戶

寫在最後

自己剛剛接觸react-native，有感興趣的朋友可以一起交流學習