reactnative基础认识、组件生命周期及核心组件的简单探索.pptx

React Native基础讲解;React Native环境配置（参照/docs/0.31/getting-started.html#content） 编写Hello World 生命周期 样式 核心组件;编写Hello World;打开工程目录，会发现有6个文件及文件夹，分别是： ios（文件夹）：包含一个iOS的原生项目 android（文件夹）：包含一个Android的原生项目 index.ios.js index.android.js node_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节点。如果你需要在运行中执行某些副操作，请在该函数中完成。 ;销毁;属性prop和状态state的对比;样式（Style）;几个核心基本组件;Image;TextInput;ListView;renderRow?function? (rowData, sectionID, rowID, highlightRow) = renderable 从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。 如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。 scrollTo(...args)? 滚动到指定的x, y偏移处，可以指定是否加上过渡动画。 ListView dataSource={this.state.dataSource} renderRow={(rowData) = Text{rowData}/Text}/ ;谢谢！