第一次react-native项目实践要点总结

时间 2019-12-08

原文原文链接

今天完成了个人第一个react-native项目的封包，固然其间各类环境各类坑，同时，成就感也是满满的。这里总结一下使用react-native的一些入门级重要点（不涉及环境）。注意：阅读须要语法基础： ES6 、react 、JSXhtml

我对react-native的理解简而言之就是：react的语法 ＋ native的组件react

组件的建立声明

class HelloWorldApp extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

上面代码定义了一个“类”，能够看到里面有一个constructor方法，这就是构造方法，而this关键字则表明实例对象。当你在其余的组件中调用这个组件时，就会实例化这个“类”（即组件）。android

注意：组件名须要大写ios

组件的导出、引用与注册

在ES6中，新增了import和export俩个关键字来导入导出模块。react－native的组件也是采用的这俩个关键字。react-native

俩种方式：微信

第一种：函数

导出：
export default class HelloWorldApp extends Component{
    render() {
    return (
      <Text>Hello world!</Text>
    );
  }
｝

导入：
import HelloWorldApp from "../.."

第二种：学习

导出：
class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

export {HelloWorldApp}

导入：
import ｛ HelloWorldApp ｝ from "../.."

后缀名自动获取（文件会获取拥有与之相应后缀名的文件）
在组件模块的导入过程当中，若是这个模块是分设备的，也就有俩个文件：xxx.android.js和xxx.ios.js，这些后缀（android和ios）是不须要的，在不一样的设备环境中，它自动获取相应后缀名的文件，即ios包会自动获取xxx.ios，android包会自动获取xxx.android。this
后缀名自动忽略（文件会自动忽略拥有与之不相应后缀名的文件）
一个ios和android的公共模块文件，即共用代码模块文件，命名不能加ios和android后缀，不然，ios包取不到有androis后缀的文件，android取不到有ios后缀的文件。spa

实例解释上述：
如今有如下五个文件：

index.ios.js

index.android.js

say.android.js

say.ios.js

HelloWorldApp.android.js

咱们想要分别在index.ios.js 和 index.android.js引入其余三个模块。咱们只要在index.ios.js 和 index.android.js文件中以下写法就行：

//这里，index.ios.js会自动获取say.ios.js的模块；index.android.js会自动获取say.android.js的模块

import 模块名 from "./say";

//这里，HelloWorldApp.android.js 是一个公共模块，index.android.js能成功获取到./HelloWorldApp；可是index.ios.js则没法获取到HelloWorldApp模块，由于index.ios.js会忽略android后缀名的模块文件

import 模块名 from "./HelloWorldApp"

react组件的生命周期

项目中使用组件的时候，纠结于componentWillMount,componentDidMount...，直到看到这张图豁然开朗(so，图是盗的)。须要注意的是，这张图应该比较老了，其中的getDefaultProps和
getInitialState这俩个函数是ES5的写法了，ES6语法中，constructor方法中代替了getDefaultProps／getInitialState，咱们能够在其内直接初始化props和state。

生命周期：

实例化（初始化）
- constructor
  设置默认的props->设置默认的state
- componentWillMount
  完成渲染以前执行，此时能够设置state
- render
  建立虚拟DOM，此时不能修改state
- componentDidMount
  真实的DOM渲染完毕，此时能够更改组件props及state
存在期：(这个时候的主要行为是状态的改变致使组件更新)
- componentWillReceiveProps
  组件接收到新的props,此时能够更改组件props及state
- shouldComponentUpdate
  操做组件是否应当渲染新的props或state，返回布尔值，首次渲染该方法不会被调用。
- componentWillUpdate
  接收到新的props或者state后，进行渲染以前调用，此时不容许更新props或state。
- render
  建立（更新）虚拟DOM
- componentDidUpdate
  组件真实的DOM更新完成
销毁期：
- componentWillUnmount
  组件被移除以前，主要用于作一些清理工做，好比事件监听

react 的 props 和 state

props（属性）

当咱们调用这些组件时，咱们若是为每个组件传递了不一样的属性，这个属性就是props。好比下例中，咱们调用了HelloWorldApp组件，并为其设置了一个date属性，则咱们能够在HelloWorldApp的组件里，经过this.props.date来获取这一属性值。
```
<HelloWorldApp date = {2016}>
```
state（状态）
state须要在constructor中初始化，而后经过调用setState方法修改。
经过上面的组件生命周期图，咱们能够看出，state是一个状态机，state的改变会引发shouldcomponentupdate、componentwillupdate、rendner...一系列方法的执行，视图会从新渲染。因此，若是须要动态地改变组件的数据或试图，请操做state。

react组件之间的通讯

子组件接收父组件的改变信号
简单：当父组件改变时，直接向子组件传递props
父组件接收子组件的改变信号
在父组件中定义一个方法，并经过props传递给子组件，子组件改变时，经过调用这个父组件传递过来的方法，从而实如今父组件中执行该方法。
非父子关系组件之间的通讯
RCTDeviceEventEmitter模块：它有俩个方法：emit和addListener，一个发送，一个接收。

RCTDeviceEventEmitter.emit(notifName,param);

RCTDeviceEventEmitter.addListener(notifName,callback)

native 事件对象

在项目中，遇到一个控制scrollview组件滚动的需求，须要获取当前滚动的坐标，当时找了很久的文档，没找到解决方案，后来发现能够经过这样来传入一个事件对象

<ScrollView ref='scrollView' onScroll = {(e) => {this.scrollhShow(e);}}>

而后在函数中读取：

scrollhShow(e) {
    console.log(e.nativeEvent)
}

当当当当，我要的滚动视图的坐标值就在里面了。

原文连接：https://www.cnblogs.com/yzg1/...，转载请注明原创！

学习React Native必看的几个开源项目

手把手教你React Native 实战之开山篇《一》

react-native技术的优劣

若是你以为此文对您有所帮助，欢迎随时撩我。微信公众号：终端研发部