你的位置:首页 > 操作系统

[操作系统]React Native知识11


一:Props(属性)

大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变

通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props,然后按需处理即可。下面是一个例子:

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Greeting extends Component { render() {  return (   <Text>Hello {this.props.name}!</Text>  ); }}class LotsOfGreetings extends Component { render() {  return (   <View style={{alignItems: 'center'}}>    <Greeting name='Rexxar' />    <Greeting name='Jaina' />    <Greeting name='Valeera' />   </View>  ); }}AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

二:State(状态)

我们使用两种数据来控制一个组件:props和state。props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。 对于需要改变的数据,我们需要使用state。

一般来说,你需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInitialState方法来初始化state,这一做法会逐渐被淘汰),然后在需要修改时调用setState方法。

假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了,所以文字内容应该是一个prop。而文字的显示或隐藏的状态(快速的显隐切换就产生了闪烁的效果)则是随着时间变化的,因此这一状态应该写到state中。

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';class Blink extends Component { constructor(props) {  super(props);  this.state = { showText: true };  // 每1000毫秒对showText状态做一次取反操作  setInterval(() => {   this.setState({ showText: !this.state.showText });  }, 1000); } render() {  // 根据当前showText的值决定是否显示text内容  let display = this.state.showText ? this.props.text : ' ';  return (   <Text>{display}</Text>  ); }}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>  ); }}AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

实例2:

import React, { Component } from 'react';import { AppRegistry, Text, TextInput, View } from 'react-native';class PizzaTranslator extends Component { constructor(props) {  super(props);  this.state = {text: ''}; } render() {  return (   <View style={{padding: 10}}>    <TextInput     style={{height: 40}}     placeholder="Type here to translate!"     onChangeText={(text) => this.setState({text})}    />    <Text style={{padding: 10, fontSize: 42}}>     {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}    </Text>   </View>  ); }}

上面这段代码就可以实现在输入框不停输入内容后,修改state里面的text内容,而且当调用setState时会刷新UI,而用组件Text 可以获得state里面text属性的值;方法constructor是构造方法,根据参数都要实现super;

注意:箭头函数知识点

ES6允许使用“箭头”(=>)定义函数。立即执行函数可以写成箭头函数的形式

// 箭头函数的例子()=>1v=>v+1(a,b)=>a+b()=>{  alert("foo");}e=>{  if (e == 0){    return 0;  }  return 1000/e;}

var f = v => v;上面的箭头函数等同于:var f = function(v) { return v;};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5;// 等同于var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;// 等同于var sum = function(num1, num2) { return num1 + num2;};

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

其它相关内容可以见ES里面的文章介绍;