react native基础 认识、组件生命周期及核心组件的简单介绍.pptxVIP

React Native基础讲解郝越React Native环境配置（参照/docs/0.31/getting-started.html#content）编写Hello World生命周期样式核心组件编写Hello World在终端命令行工具中运行 react-native init HelloWorld 来创建一个名为HelloWorld的React Native工程打开工程目录，会发现有6个文件及文件夹，分别是：ios（文件夹）：包含一个iOS的原生项目android（文件夹）：包含一个Android的原生项目index.ios.jsindex.android.jsnode_modules（文件夹）：包含React Native的框架文件package.json：React Native的版本信息和简单的工程信息打开index.ios.js（或index.android.js）进行编辑，这里是React Native的默认入口文件React Native组件的生命周期初始化销毁存在期(运行中)初始化阶段的五个函数运行过程中的五个函数componentWillReceiveProps(nextProps)： props改变（父容器来更改），将会调用该函数。新的props将会作为参数传递进来，旧的props可以根据ps来获取。我们可以在该函数中对state作一些处理。注意：在该函数中更新state不会引起二次渲染。boolean shouldComponentUpdate(object nextProps, object nextState)： 该函数传递过来两个参数，新的state和新的props。state和props的改变都会调到该函数。该函数主要对传递过来的nextProps和nextState作判断。如果返回true则重新渲染，如果返回false则不重新渲染。在某些特定条件下，我们可以根据传递过来的props和state来选择更新或者不更新，从而提高效率。componentWillUpdate(object nextProps, object nextState)： 与componentWillMount方法类似，组件上会接收到新的props或者state渲染之前，调用该方法。但是不可以在该方法中更新state和props。render： 组件渲染函数，会返回一个DOM，只允许返回一个最外层容器组件。render函数尽量保持纯净，只渲染组件，不修改状态，不执行副操作（比如计时器）。componentDidUpdate(object prevProps,object prevState): 和初始化时期的componentDidMount类似，在render之后，真实DOM生成之后调用该函数。传递过来的是当前的props和state。在该函数中同样可以使用this.getDOMNode()来拿到相应的DOM节点。如果你需要在运行中执行某些副操作，请在该函数中完成。销毁componentWillUnmount： 组件DOM移除的时候调用，比如对监听或定时器的操作。 属性prop和状态state的对比样式（Style） 在React Native开发UI界面布局的时候，针对组件位置或者效果如何可以做出令人比较满意的界面，那么样式就非常有用了。 比较常用到的有颜色（color），字体大小（fontSize），以及组件的宽高（width,height）和位置（margin,marginBottom等）几个核心基本组件Text：用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。allowFontScaling?bool? 控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放。numberOfLines?number? 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。onLayout?function? 当挂载或者布局变化以后调用。参数为：{nativeEvent: {layout: {x, y, width, height}}}.onPress?function? 当文本被点击以后调用此回调函数。Imagesource{uri: string} uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径onLoad?function? 加载成功完成时调用此回调函数。onLoadEnd?function? 加载结束后，不论成功还是失败，调用此回调函数。onLoadStart?function? 加载开始时调用。resizeMode?enum(cover, contain, stretch)?决定当组件尺寸和图片尺寸不成比例的时候如何调整图片