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