简介
环境安装
helloWorld
项目结构
android的gradle依赖
react本身的一些概念(如JSX,组件,state)
SectionList例子
学习地址: https://reactnative.cn
常见问题及错误。
----------------------------------------------------------------------------------------------
首先看下分别在android和ios上运行的一个普通列表页面效果,用的是SectionList:(高性能的分组(section)列表组件)
正文:
简介:
•ReactNative 使用 JavaScript和 React编写应用,利用相同的核心代码就可以创建 Web,iOS 和Android 平台的原生应用
•app分类的话:
• webapp:移动端的web页面,纯浏览器应用。
• native-app:Java或者oc、swift开发的app,用的本地的组件以及布局。
• hybrid-app:介于以上两者之间。即有原生的组件,又封装了webview在里面 以便渲染web组件。
• react-native:是属于native app,渲染完全是本地方式,不靠webview。写代码的方式又是web前端。
环境和开发工具的安装:
•As、xCode、jdk、git,VirtualBox以外
•
•3、Homwbrew,mac系统的包管理器,卸载只要uninstall即可,不用怕卸不干净
•4、Node.js
遇到的问题:装homebrew,一直报错
原因xcode版本太旧,然后升级。Xcode
是7.0以上的
node安装完毕
5、Yarn,npm。命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务
npminstall -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist--global
npm包管理,去下载各种第三方依赖。
•Android需要的sdkPlatform:
•SdkTools
•ANDROID_HOME环境变量,修改profile文件
如何新建一个项目:
•命令行
React-native
init
helloWorld
•装完环境首次初始化项目需要翻墙,但时间比较长,所以这个过程出现的错误可能是网络错误。
•我们来看一下初始化后的项目生成了哪些代码
项目结构
•最外层可以说是Native项目壳
•index就可以看成是rn项目的ios和Android入口,入门项目中就是在这两个文件中进行页面的开发
•
•package.json就关键了,功能应该是类似我们Android项目中的build.gradle,说明整个Rn项目的名称,版本号,以及需要的依赖等。
node_modules,这个目录是node通过解析package.json下载的相关依赖。
拷贝别人的项目的时候这个完全不需要拷贝,我们只需要对好package.json,
然后通过npm install命令,就可以重新生成对应的node_modules目录。
备注:其中node_modules和 package.json都是NodeJS相关的目录
android和ios文件夹是原生的项目代码。
运行项目:
react-nativerun-android 或 react-nativerun-ios
如果提示devide的异常,不一定是devide没有连接成功,仔细查看details的提示
解决:小米手机设置->开发者选项->启用MIUI优化 关闭
Component,state, Props:
•Component组件:
•ListViewButtonScrollViewText等
•
•State(状态):
•我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据,我们需要使用state。
•
•Props(属性):
•大多数组件在创建时可使用参数来进行定制。用于定制的这些参数就称为props(属性)。
•以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。
Jsx语法:
•React使用 JSX来替代常规的 JavaScript。
•JSX 是一个看起来很像 XML 的JavaScript 语法扩展。
•它是类型安全的,在编译过程中就能发现错误。
•这是 Facebook 对ECMAScript 的扩展,即 JavaScript语法扩展,基于 XML 样式
•
SectionList组件:
•SectionList:
•高性能的分组(section)列表组件,支持下面这些常用的功能:
•跨平台。
•支持水平布局模式。
•行组件显示或隐藏时可配置回调事件。
•支持自定义行间分隔线。
•支持下拉刷新。
•支持上拉加载
•接下来看一下他的代码
•App.js文件
•文件内容主要分为三部分:
•(1) 引入需要的组件
•比如需要 react 中的Component,需要 react-native中的 View,跟 Java类似。
•(2) 定义新的组件
•继承 Component 定义新的组件,组件的render 函数返回一个 View,View 内包含一个Text 控件。
•styles为样式,跟 CSS类似。
•(3) 注册组件
•AppRegistry是运行RN Apps 的 JS切入点,App的根组件需要通过 AppRegistry.registerComponent注册。
总结:
•几个常用的命令
•react-nativeinitHelloWorlds
•新建工程,其中 HelloWorlds为工程名,在工程目录下运行
•react-nativerun-android
•运行android项目
•或者
•react-nativerun-ios
•运行ios项目
•React Native的优势:
•相对Hybirdapp或Webapp:
•不用Webview,摆脱Webview很多交互和性能问题
•有较强的扩展性
•相对于Native app:
•可以通过更新远端JS,直接更新app