主要使用的第三方控件以及相關筆記
react-native-cli
環境搭建
npm install --save-dev react-native-cli
Github地址
創建簡易的React-Native項目
react-native-network-image
第三方控件
npm install --save react-native-network-image
Github地址
調整網絡圖片的顯示大小
react-native-tab-navigator
第三方控件
npm install --save react-native-tab-navigator
Github地址
App常見底部導航
art
第三方控件
npm install --save art
Github地址
創建和編輯App當中的SVG
native-base
第三方控件官網地址
跨平臺的基礎組件庫
react-native-elements
第三方控件Github地址
跨平臺的基礎組件庫
react-native-storage
第三方控件
npm install --save react-native-storage
Github地址
App本地持久存儲
ListView
開發教程
react-native-audio
第三方控件
npm install --save react-native-audio
Github地址
App音頻錄制和播放
React-Native 手勢
開發教程
React-Native 聲明屬性和屬性確認
開發問題
依舊采用React的聲明屬性
但是存在常見類型不對應的情況,例如:
<Image source={inputSource} />
inputSource:PropTypes.object //錯誤
inputSource:PropTypes.number //正確
輸入框被鍵盤遮擋
開發問題
react-native-image-picker
第三方控件
npm install --save react-native-image-picker
Github地址
選擇圖片并操作
ESLint
環境搭建
在項目當中啟用Eslint代碼檢查
開發過程中遇到的問題
開發問題
- react-native在iOS9以后默認默認只發送https請求，對于http請求的圖片存在加載不上的問題，需要在info.list當中配置，解決方法如下：
add row:App Transport Security Settings
add item:Allow Arbitrary Loads-YES
- 相冊當中顯示英文，需要在info.list當中配置，解決方法如下：
add row:Localized resources can be mixed-YES
- React-Native上傳的文件并不是blob的二進制形式，而只是一個包含了name、uri、type三個屬性的JSON對象
{
uri: fileuri,
type: "image/jpeg",
name: filename
}
- KeyboardAvoidingView使用注意事項，KeyboardAvoidingView標簽外部不能包裹其他標簽，否則容易導致輸入框上移失效
- 關于React-Native跨平臺的解決方案,有下列文章可供參考:
Better Cross-Platform React Native Components- 閃退處理,閃退原因
- ListView第一次加載出現不渲染數據,需要拉動或者點擊才能觸發渲染數據的情況.解決方法可以參考下列問題:問題A,問題B
