主要使用的第三方控件以及相关笔记
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
