React Native
上一篇写了 React Native 的环境搭建，这一篇开始真正的代码编写。
Hello world
新建一个 React Native 项目，打开 index.ios.js 或者 index.android.js 文件，修改主界面布局的代码。例如：
import React, { Component } from 'react';
import {
AppRegistry,
Text
} from 'react-native'
export default class HelloWorld extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
上面这段代码是一个最简单的 Hello World React Native App。前两句 import 语句是从 React 库中引入需要的模块。
之后，定义了一个组件（Component），名字叫 HelloWorld。我们在开发 React Native App 时，会创建很多组件。创建一个组件非常简单，唯一必要的就是通过 render() 方法返回一段 JSX 内容。
最后一句代码，AppRegistry 告诉 React Native 哪个组件是整个应用的根组件。不必纠结于理解最后一句代码，每个 React Native App 只会执行一次该操作。
组件的属性（props）
大部分组件可以通过不同的属性进行自定义，这些属性在 React Native 中被称为 props。
比如，我们要创建一个 Image 组件来显示一张图片，就可以在创建时通过设置 Image 组件的 source 属性来决定要展示的图片。
代码如下：
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
export default class HelloWorld extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
在自定义的组建中使用 props
属性不仅可以运用在内置的组件当中，也可以运用在自定义的组建当中，以便我们灵活地创建组件。
在 React Native 中创建组件的方法很简单，就是创建一个继承于 Component 的类，并实现 render() 方法，返回一段 JSX 代码。
例如，我们可以这样创建一个 Greeting 组件来显示一句 Hello Foo 字符串，其中，Foo 可以自定义。
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
其中，this.props.name 用来读取当前组件的 name 属性的值。
自定义组件的使用也很简单，在根组件的 render() 方法返回的 JSX 中直接食用即可：
export default class HelloWorld extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='React Native' />
</View>
);
}
}
这样就会显示一句 Hello React Native。
组件的状态（state）
在 React Native 中，除了 props 以外还有一种控制组件的方式，那就是 state。props 的值在组件的整个生命周期内是不变的，当我们需要在组件上设置一些可变的数据是，就需要使用 state。
比如，我们要创建一个闪烁字符串的组件，组件可以接受一个 text 属性代表要显示的文字。在组件中，我们需要定义一个名为 showText 的 boolean 类型的 state，并且每一秒钟改变一次值，用来显示和隐藏要展示的问题，达到闪烁的效果。
代码如下：
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
在创建组件的时候，我们给 showText 设置了一个默认值 true，然后启动定时任务，每一秒钟执行一次，将 showText 的值设置为与当前相反的值。
在根组件的 render() 方法中使用这个组件，并设置 text 属性，就可以创建一个带闪烁效果的文字。
在真实场景中，往往不会通过定时器来改变组件的状态，而是根据特定场景，在从服务器获取到新的数据或者有新的用户操作时改变组件的状态。
网友评论