简介
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。
我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。
props(属性)。
以常见的基础组件Image
为例,在创建一个图片时,可以传入一个名为source
的属性(prop)
来指定要显示的图片的地址,以及使用名为style
的属性(prop)
来控制其尺寸。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas 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}} />
);
}
}
请注意{pic}
外围有一层括号,我们需要用括号来把pic
这个变量嵌入到JSX语句
中。括号的意思是括号内部为一个js变量
或表达式
,需要执行后取值。因此我们可以把任意合法的JavaScript表达式
通过括号嵌入到JSX语句
中。
当然你也可以写成这样
import React, { Component } from 'react';
import {
Image
} from 'react-native';
export default class Bananas extends Component {
render() {
return (
<Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}} style={{width: 193, height: 110}} />
);
}
}
Image组件
用于显示图片;
source属性
指定显示图片的地址,有两种指定形式:
指定本机文件:source={require('./icon.png')}
,,相对位置寻址
注:: 如果你有my-icon.ios.png
和my-icon.android.png
,Packager
就会根据平台而选择不同的文件。
指定网络图片:source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
注:: 一般需要手动指定图片的尺寸 style={{widtn:193,height:110}}
下面是指定本机文件的写法
import React, { Component } from 'react';
import{ Image, View } from 'react-native'
export default class APP extends Component {
render() {
return(
<View>
<Image source={require('./img/guide.png')} />
</View>
);
}
}
自定义的组件也可以使用props
。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render
函数中引用this.props
,然后按需处理即可。
下面的例子把Greeting组件
写在JSX语句
中,用法和内置组件并无二致,我们在Greeting组件
中将name
作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
//在组件中,获取属性的方法如下代码:
class Greeting extends Component {
//每一个组件中必须有一个render方法,用于输出组件
render() {
//使用return来返回要输出的内容
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
//定义属性:
export default class App extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='zhang' />
<Greeting name='wang' />
<Greeting name='zhao' />
</View>
);
}
}
组件的用法与原生的 HTML 标签
完全一致,可以任意加入属性,比如<Greeting name="wang">
,就是Greeting组件
加入一个name属性
,值为wang
。组件的属性可以在组件类的this.props对象
上获取,比如name属性
就可以通过this.props.name
读取。
State(状态)
我们使用两种数据来控制一个组件:属性(props)
和状态(state)
。属性(props)
是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用状态(state)
。
一般来说,你需要在constructor
中初始化状态(state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰)
,然后在需要修改时调用setState
方法。
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了,所以文字内容应该是一个属性(prop)
。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到状态(state)
中。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Blink extends Component {
//constructor 构造函数
constructor(props) {
super(props); //执行父类的方法
this.state = { showText: true };
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
// 根据当前showText的值决定是否显示text内容
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
export default class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
constructor
我觉得在这里有必要介绍一下constructor
属性,当你在React class
中需要设置state
的初始值或者绑定事件时,需要加上constructor(){}
我们知道,在JavaScript
中,constructor
返回对创建此对象的数组函数的引用。
例程如下,前者输出内容,后着输出整个 constructor
构造函数
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
</script>
输出结果:This is an Array
<script type="text/javascript">
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);
</script>
输出结果:function employee(name,job,born) { this.name=name; this.job=job; this.born=born; }
而在react-native中,用法是稍微有些区别的
onstructor方法
中出现了super
关键字,它在这里表示父类的构造函数,用来新建父类的this对象
,子类必须在constructor方法
中调用super方法
,否则新建实例时会报错,因为子类没有自己的this对象
,而是继承父类的this对象
,然后对其进行加工。如果不调用super方法
,子类就得不到this对象
。
取反操作
// 每1000毫秒对showText状态做一次取反操作
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
这里其实就是将this.state
的值作为一个参数previousState
传了进去,previousState.showText
跟this.state.showText
是等价的;然后要通过return
方法把值返回给state
,不然这个showText
只是作为形参,不对外面的state
产生影响。在这里previousState
只起到中转作用,你可以把它改为任意值,不影响效果,就像下面这样
this.setState(aa => {
return { showText: !aa.showText };
});
当然如果觉得不好理解的话,也可以直接用下面这种写法
this.setState({showText: !this.state.showText});
State的工作原理和React.js完全一致,所以对于处理state的一些更深入的细节,你可以参阅React.Component API。不过上面那个英文版的看着不方便,如果想学习更多关于react的知识的话,所以强烈推荐极客学院的中文版本