RN课程
RN基础内容
RN介绍
- 使用前沿的JAVASCRIPT为IOS、ANDROID编写跨平台原生APP
- Facebook已经在多项产品中使用了React-Native,后台是强大的国际互联网公司支持
- ReactNative使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。
- React Native着力于提高多平台开发的开发效率——仅需学习一次，编写任何平台。(Learn once, write anywhere)
RN网址
RN快速开始
环境配置
Java
C++
Node
Git
python
Android ADT
依赖环境安装
npm install react-native-cli -g
快速开始
第一次打包
- 初始化项目
react-native init rn_example - 将你的手机用数据线连接电脑
- 打包
react-native run-android- 自动帮你启动一个打包构建服务，端口号是8081
- 生成的app自动帮你安装到手机里面去
- android手机需要打开手机的悬浮框权限，权限管理-->显示悬浮框
- 之后重启应用，通过摇一摇或者菜单键打开开发选项菜单
- 选择
Dev Settings-->Debug Server host & port for device并设置 - 设置你手机和电脑在同一个局域网的ip地址加8081端口
- 之后你就可以进行开发了
平常的开发
- 就第一次安装应用的时候才需要连接数据线，之后只需要在同一个局域网就可以真机查看效果了
- 运行
react-native start之后会启动一个服务 - 在浏览器中输入
http://localhost:8081/index.android.bundle?platform=android一直等到能刷出js代码才算服务启动完毕- 这个服务在整个开发的过程中要一直开着
- 当你修改了代码之后运行手机应用开发菜单中的
Reload键就可以刷新应用内容了 - 你可以点击手机开发菜单中的
Debug JS Remotely键实现在浏览器中断点调试功能
RN主要内容
常用组件介绍
- 在RN应用中你不会看到任何的html标签，因为我们这是原生应用
- 你只能使用官方帮你提供的组件去构建应用，因为只有这些组件才能通过配置文件转化为原生组件
View组件
- 这个组件就相当于pc里面的div标签
- http://reactnative.cn/docs/0.39/view.html#content
Text组件
- RN中只要涉及到文字，就用这个组件包裹
- http://reactnative.cn/docs/0.39/text.html#content
Image组件
- 只要涉及到图片相关内容都用这个组件
- 用到图片就要给固定的宽高
- source属性中不能拼接路径，只能使用拼接好的
- http://reactnative.cn/docs/0.39/images.html#content
- http://reactnative.cn/docs/0.39/image.html#content
按钮系列组件
- Button TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback
- http://reactnative.cn/docs/0.39/touchablehighlight.html#content
TextInput组件
- 涉及到文本输入都用这个组件
- http://reactnative.cn/docs/0.39/textinput.html#content
ScrollView组件
- 滚动的内容都用这个组件包裹
- http://reactnative.cn/docs/0.39/scrollview.html#content
Navigator组件
ListView组件
常用api介绍
StyleSheet
- 所有RN中的样式都必须用这个Api创建
- 所有样式名称都必须是驼峰命名
- RN中所有的组件默认display属性都是flex，而且主轴方向是column
- http://reactnative.cn/docs/0.39/stylesheet.html#content
封装原生组件
- 自己去写原生代码，扩展自己的功能
常用第三方组件
RN插件查找地址
手势锁
上拉刷新下拉加载更多
轮播图
图标库
操作手机底层
- 这些第三方组件需要修改原生项目，修改了原生项目就要重新打包
微信分享
热更新
摄像头
视频播放