转载请注明出处:王亟亟的大牛之路
先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android
今天又加了几个疑难杂症哦!!
上一篇讲了属性,这一篇主要讲 State Style,给出上次的传送门,以便有更好的连贯性:http://www.jb51.cc/article/p-hbdcddif-w.html
State 状态
在RN中用来描述对象的除了属性Props还有状态State,那么状态又是个什么东西呢?
There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change,we have to use state.
In general,you should initialize state in the constructor,and then
call setState when you want to change it.
这一段英文很罗嗦但是我们看下关键的信息
1 .props是在父组件中指定,一经指定,在被指定的生命周期中则不再改变
2 .对于需要改变的数据,我们需要使用state
3 .需要在constructor中初始化state,然后在需要修改时调用setState方法。
OH说得好抽象?白话一点就是 props类似于一个final类型的东西,一旦初始化了就无法改变了但是state可以变,而且只要setState就行了,想怎么变都随你,根据业务需求各种set吧!
然后看一个 文字隐藏显示的例子
效果:
import React,{ Component } from 'react';
import { AppRegistry,Text,View } from 'react-native';
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>
);
}
}
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);
在“构造函数”里初始化让他默认为 true
然后调用计时器方法(这部分API以后会介绍),
然后 每次调用都吧state属性设置为相反值。
触发时间为1秒,然后就是图里的效果了。
从头到尾 只在一开始给予Props赋值了文字内容改变的行为都是 state执行的。
这就是state,不太难理解但是常常使用的一个知识点。
状态容器API:http://redux.js.org/index.html
Style 样式
样式这个东西大家肯定不陌生,JS在WEB端的好搭档CSS也在RN出现,来负责“颜值”相关的功能,只是语法稍有变化,我们来看看官方是怎么讲的
官方说了,我们不需要为了样式学什么新的语法,只是他和Web的CSS有一些小小的差异而已,然后举了个background-color的例子.
一个View可以有多个样式属性,他们以数组形势共存,当然如果多个样式出现重复,排在那么右边的会覆盖之前的,具体情况我们看一下他的例子
import React,{ Component } from 'react';
import { AppRegistry,StyleSheet,View } from 'react-native';
class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue,styles.red]}>bigblue,then red</Text>
<Text style={[styles.red,styles.bigblue]}>red,then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',fontWeight: 'bold',fontSize: 30,},red: {
color: 'red',});
AppRegistry.registerComponent('LotsOfStyles',() => LotsOfStyles);
这里的 styles变量有2种样式 一个是bigblue red一个是red然后他们各自有着个自的属性,颜色啊,大小什么的。
例子主要看第三,第四个<Text/>
充分解释了
居后的样式对象比居前的优先级更高,这样你可以间接实现样式的继承
这个概念!!
这篇就到这,希望你能有所收获
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。