react-native开发总结

项目地址：http://liu12fei08fei.github.io/blog/41react-native.html
说明
• 项目总结代码地址
• 从项目开始启动（2018-07-02）到项目进入测试（2018-08-20）
• 从我基本没用过react，到直接上手react-native
• 其实从内心我是又爱又怕，爱是我确实很早就像下手除Vue以外的框架，多接触和学习一些不一样的思想；怕是前端就我一个，一切坑都由自己来抗；可想而知，内外压力一定会很大
• 过程就是日复一日的研究在研究，不停地问问题，然后在研究；开发rn很想开发小程序，更多时候还是利用rn提供的组件，再加上一些js技巧
• 结果：自己对社区的利用更加的顺手，面对难题不在过分畏惧而是不断深入思考，直至解决
• 心理：其实直面难题并不难，难的是自己看到了难题背后还有无数个难题，这时候自己就不想面对了；后来知道与其逃避，不如遇到一个干掉一个，不然攻城狮不是白叫了
• 下面是自己在实际中从开始到结束总结的一些东西，后续随着进展还会更新
简介
• 记录开发react-native中各种有意思的事情
• 最新探索，用来进行各种尝试的空间
• 完成的探索，记录所有已经完成的模块、功能和效果
• 中转站，暂时无用
安装
全局脚手架
npm i -g react-native-cli
安装基础项目
react-native init
运行
优化后的运行
• ios：npm run ios
• android：npm run android
• ios and android：npm run s
原始启动
• ios：react-native run-ios
• android：react-native run-android
资源
• navigation集成
• 集成icons
• react-native-easy-toast
• rn资源列表
• 横向滑动展示按钮效果
• 自定义行动列表
• 密码输入效果
• 选项卡导航之间滑动
• 二维码生成
未探索的资源
365个库中寻找77个
1. select选择控件
2. 开关式选择列表
3. 表情选择器
4. 左右滑动层
5. 手机号选择控件
6. 登录动画
7. 图片查看器
8. 菜单操作动画
9. 滑动操作图片展示样式
10. 操作打字效果
11. 声音可视化
12. 占位符
13. 图片查看器
14. 模糊背景效果
15. 本地图片超级操作
16. 四面八方拖动效果
17. 信用卡输入效果
18. 展开动画效果
19. chart
20. 初始化启动页
21. 日期
22. 左右滑动操作卡片效果
23. 列表拖拽
24. chart
25. 密码锁效果
26. 星级评价
27. 手动签字
28. 滑动时间轴效果
29. 国家26字母选择
30. PDF查看
31. 26字母选择
32. 分享
33. 对话框
34. 电话、地址等操作
35. 后台信息保护
36. 图片查看器
37. 左右滑动动画
38. 无网络操作
39. 颜色选择器
40. 左右滑动tab动效
41. 加载中效果
42. 左右滑动效果，类似酷划锁屏
43. 二维码生成器
44. 图片查看器
45. 视差效果
46. 日期
47. 点击效果、
48. 扇形菜单
49. 手势识别
新增页面需要在三个地方进行操作
1. data里面的complete.js中添加数据，方便在完成的探索中出现
2. navigators中的AppStackNavigators.js里面进行引入=>注册，使得路由正常
3. pages里面添加页面
优化package.json使开发更加方便
• 在scripts中添加，如下内容：
"ios":"react-native run-ios",
"android":"react-native run-android",
"s":"npm run ios && npm run android",
flex布局常用属性
• 防止在flex中出现，固定元素被挤压的问题，使用flex:1进行优化
display: 'flex';
flexDirection: row | row-reverse | column | column-reverse;
flexWrap: nowrap | wrap | wrap-reverse;
flexFlow: || ;
justifyContent: flex-start | flex-end | center | space-between | space-around;
alignItems: flex-start | flex-end | center | baseline | stretch;
alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

order: ;
flexGrow: ; /* default 0 /
flexShrink: ; / default 1 /
flexBasis: | auto; / default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
alignSelf: auto | flex-start | flex-end | center | baseline | stretch;
图片
图片使用

命名规则
• icon_test.png
• icon_test@2x.png
• icon_test@3x.png
链接原生库
第一步
安装带原生依赖的库
npm install --save
第二步
运行以下命令，它会根据package.json文件中的dependencies和devDependencies记录来链接所有需要链接的库
react-native link
开发技巧
• 启动hot或者debug的时候，切记不要同时启动ios and android，两者会发生冲突，导致出现程序崩溃，从而影响开发
• 最好的方式是，启动一个hot或debug，这样可以良好的进行开发；另一个手动足够了
处理触摸事件
使用"Touchable"开头的一系列组件
通过onPress属性接受一个点击事件的处理函数
• 两种方式绑定事件，并处理点击范围
• 推荐第二种，方便传递数据
_onPressButton=((item)=>{
alert(1)
console.log(item);
})
render() {
return (

{this.state.bg}

{
this._onPressButton(this.state.bg)
}}>

{this.state.bg}

);
}
解决版本冲突问题
js版本和rn版本出现冲突
• Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
• 清除Watchman：watchman watch-del-all
• 清除rn缓存：react-native start --reset-cache
解决路由失效问题
• createTabNavigator要在createStackNavigator里面进行注册，才能够使用createStackNavigator具有的方法，这个是我第二次配置的时候掉进的一个坑
this.props.navigation属性详细说明
• 在createTabNavigator里面没有push、replace等方法
• 在createStackNavigator中存在push、replace等方法
AsyncStorage保存报错
JSON value '' of type NSNull
• 当保存值为undefined的时候，报错
• 防止这种问题发生最好在this.state中保存初始值为空，必要时可以提醒用户
react-native支持的style props
• 查看最新版属性支持情况，最简单的直接在页面使用错误的属性，然后查看报错信息