Yifans_Z's Blog.

React Native 入门

字数统计: 1.6k阅读时长: 21 min
2017/08/21 Share

React Native 入门学习练习 - Mac 环境

项目代码:GitHub - imzyf/react-native-started

Thanks:

组件

React 组件将 UI 分割成独立的、可复用的一些碎片或部分,这些部分是相关独立的。

组件是对 View 层的抽象。

组件

修改入口文件

修改入口文件 index.ios.js index.android.js

import { AppRegistry } from "react-native";
import Setup from "./js/Setup";

AppRegistry.registerComponent("sample", () => Setup);

创建组件

三种创建组件的方式:

注意:

  • 组件类的第一个字母必须大写。
  • 组件类只能包含一个顶层标签。

由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

render() 函数应该是纯粹的,也就是说该函数不修改组件的 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用 setTimeout)。
如果需要和浏览器交互,在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。

HTML 标签与 React 组件对比

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。

组件的生命周期

什么是组件的生命周期?
组件 装载 - 更新 - 卸载 的过程。

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

组件的生命周期

Mounting:

  • getInitialState()/constructor(props) 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
  • componentWillMount() 服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。
  • componentDidMount() 在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

Updating:

  • componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。
  • shouldComponentUpdate(object nextProps, object nextState) 在接收到新的 props 或者 state,将要渲染之前调用。(可以使用此方法灵活控制当 props 或 state 发生变化时是否要重新渲染组件。)
  • componentWillUpdate(object nextProps, object nextState) 在接收到新的 props 或者 state 之前立刻调用。(不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps。)
  • componentDidUpdate(object prevProps, object prevState) 在组件的更新已经同步到 DOM 中之后立刻被调用。(该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。)

Unmounting:

  • componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用。(在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。)

Tips:

  • 在 Simulator 中 Cmd+R 选择 Remote JS Debbugging 将开启一个 web 窗口 再打开游览器的 Developer Tools 将可以看到 console.log 的内容。

组件、变量、方法的导入与导出

eg: ExportComponent.js

导出:

// 导出变量、常量
export var myName = "yifan";
export const myWebsite = "zyf.im";

const age = 24;
const sex = "male";
export { age, sex };

// 导出方法
export function sum(a, b) {
return a + b;
}

导入:

// 第一个为 default export,{} 中为其他 export 的
import ExportComponent, { myName, age, sum } from "./ExportComponent";

props

props 为从父组件传入的值,只读。 eg: PropsTest.js

定义默认 props:

static defaultProps = {
name: 'default-yifan',
sex: 'male',
};

检测 props 类型:

static propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired,
};

Tips:WebStorm command + left click PropTypes.string 可以看源码中的其他选项。

延展操作:

var boyProps = {name: 'Liming', age: 6, sex: 'boy'};

...

<PropsTest {...boyProps}/>

结构赋值:

var { name, age } = boyProps;

state

eg: StateTest.js

Tip:导入图片文件后,会有报错,需要重启 server。

初始化

// 初始化 方法一
state = {
balloonSize: 10,
};
// 初始化 方法二(推荐)
constructor(props) {
super(props);
this.state = {
balloonSize: 30,
}
}

可以通过控制 state 控制一些 UI 动画。

ref

eg: RefTest.js

<Text style={styles.tip}
onPress={() => {
this.setState({
balloonSize: this.refs.refStateTest.getSize(),
//balloonSize: this.refs['refStateTest'].getSize(),
})
}}>
click me to knew the ballonSize: {this.state.balloonSize}
</Text>

<StateTest ref='refStateTest'/>
balloonSize: this.refStateTest.getSize(),
<StateTest ref={refStateTest => (this.refStateTest = refStateTest)} />;

getSize()<StateTest/> 中定义的一个方法。S

class

eg: Animal.js

export default class Animal {
// 构造方法,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数。
constructor(name, color) {
this.name = name;
this.color = color;
}

getInfo() {
return "name:" + this.name + ",color:" + this.color;
}
}

export class Cat extends Animal {
constructor(action) {
// 子类必须要在 constructor 中指定 super 方法,否则在新建实例的时候会报错。
// 如果没有置顶 consructor,默认带 super 方法的 constructor 将会被添加。
super("cat", "white");
this.action = action;
}

getInfo() {
return (
"name:" + this.name + ",color:" + this.color + ",action:" + this.action
);
}
}
import Animal, { Cat } from "./Animal";

var animal = new Animal("dog", "white");

ES5 与 ES6 区别

React Native 之 React 速学教程(下)/>)

flex 布局

Reac Native 布局详细指南

按钮详解 Touchable

React Native 按钮详解|Touchable 系列组件使用详解

图片使用

  • 网络图片,需要指定长宽。
  • resizeMode Determines how to resize the image when the frame doesn’t match the raw image dimensions.
  • 分辨率适配 @2x @3x

调试技巧

模拟器调试菜单

  • iOS command + d
  • Android command + m
  • 真机:摇一摇

Reload

  • iOS command + r
  • Android 双击 r

Enable Live Reload

  • 全部更新代码,全部刷新

Enable Hot Reload

  • 增量更新

Remote JS Debbugging

  • Chrome 中调试代码。command + option + i。可以设置断点。
  • 勾选 Pasue On Caught Exception 有助于找错。
CATALOG
  1. 1. 组件
    1. 1.1. 修改入口文件
    2. 1.2. 创建组件
    3. 1.3. HTML 标签与 React 组件对比
    4. 1.4. 组件的生命周期
    5. 1.5. 组件、变量、方法的导入与导出
    6. 1.6. props
    7. 1.7. state
    8. 1.8. ref
    9. 1.9. class
  2. 2. ES5 与 ES6 区别
  3. 3. flex 布局
  4. 4. 按钮详解 Touchable
  5. 5. 图片使用
  6. 6. 调试技巧
    1. 6.1. 模拟器调试菜单