Vary's Blog

React Native学习笔记(一)

创建React Native 项目

到你想要存放React-Native项目的目录执行react-native init {项目} 即可初始化一个新的React-Native项目

创建完成后即可看到index.android.js和index.ios.js还有其他文件。

让android和ios加载同一部分代码

  1. 新创建一个setup.js,名字可随意不一定得是setup.js,但不能是index.js。内容可直接复制index.android.js或index.ios.js的代码,修改下名字即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import ...
    export default class setup extends Component {
    render() {
    return (
    ...
    );
    }
    }
    ...
  2. 将setup导入到index.android和index.ios

    1
    2
    3
    4
    5
    6
    7
    8
    import React, { Component } from 'react';
    import {
    AppRegistry
    } from 'react-native';
    import setup from './setup'
    AppRegistry.registerComponent('study', () => setup);
  1. 这样一来app启动之后不管是访问index.android还是index.ios都会指向setup,在setup里面做的所有修改都可以运行在android和ios设备上。

创建react-native组件

这里只简单说明ES6创建组件的方式,新建一个MyComponent.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import {
Text
} from 'react-native';
// 用export default 将其导出
export default class MyComponent extends Component {
render() {
return (
<Text style={{fontSize:22,color : '#212121'}}>
Hello.{this.props.name}
</Text>
);
}
}

在setup中使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
//导入MyComponent 组件
import MyComponent from './MyComponent'
export default class setup extends Component {
render() {
return (
<MyComponent name="MyComponent"/>
);
}
}
AppRegistry.registerComponent('study', () => setup);

显示效果
组件显示效果

react-native组件的生命周期

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法,在Android中Activity则提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生

那么在React 中组件(Component)也是有自己的生命周期方法的。
组件的生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

组件装载

组件在渲染之前,会先调用默认的props,ES6就是,static defaultProps;接下来就是组件初始化,constructor(props)组件的构造方法;接下来是 componentWillMount组件在加载之前的方法;render完成组件的渲染;componentDidMount 组件渲染完成。接下来就进入运行阶段啦。(一次调用)

组件更新

在运行中,如果组件的属性发生了改变,就会调用 componentWillReceiveProps 会被调用,然后就会调用 shouldComponentUpdate ,询问我们是否要渲染组件,如果返回FALSE的话,就不会渲染;如果是TRUE的话,就会调用componentWillUpdate重新渲染组件,然后render,再后来就完成更新啦componentDidUpdate(多次调用)

组件卸载

页面关闭的时候,组件会被卸载,componentWillUnmount,可以完成资源的回收与释放啦。(一次调用)

Vary Zhao wechat
欢迎你扫描上面的二维码,加我微信