上一篇我们安装了React Native以及看了一下HelloWorld,那么这一篇我们来看一下属性以及变量
属性
当然,学习还是跟着demo学习,首先来第一个demo
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
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}} />
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
这里面出现来一个数据类型 let
这个是ES中的语法,跟这个相关的是另一个var
let只在当前代码块中生效
var出了当前的代码块也能生效
试验一下
export default class HelloWorlds extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
// 尝试把`flexDirection`改为`column`看看
<View style={{flex: 1, flexDirection: 'column',justifyContent:'center'}}>
<Text>{str2}</Text>
<Image source={pic} style={{width: 193, height: 110}} />
</View>
);
}
}
{
let str1 = "1"
var str2 = "2"
}
运行效果
改成<Text>{str1}</Text>
这是内部的属性,那么外部传入的属性呢?
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);
可以理解为,每一个class都有一个props用来存储任意变量,并且不用事先定义好,的确是很神奇的写法
状态
State(状态)
直接上demo
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
function functionName() {
}
export default class HelloWorld extends Component {
render() {
return (
<View style={{flex:1,justifyContent:'center',alignItems: 'center'}}>
<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>
);
}
}
class Blink extends Component {
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>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
这样的效果就是,显示的文字每秒进行闪烁效果
总结一下
props: 组件中父级向子级传递数据的方式
state:在不操纵DOM树的情况下 刷新页面的一种方式(通过操作state实现数据的时时变化)
大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.
换句话来说 props就是初始值 需要改变只能操作 state