React Native 学习笔记五（关于样式的使用）

React Native中样式的使用和web的css基本上没有什么变化 样式名基本上是遵循了web上的CSS的命名，只是按照JS的语法要求使用了驼峰命名法，例如将

background-color

改为

backgroundColor

。

实际开发中  建议使用StyleSheet.create的方法进行声明  就像一个单独的css文件一样  以提高样式的复用  和代码的可读性  使用起来比较方便
 

我在上个state的基础上进行的修改 示例如下：

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class Blank extends  Component{
//初始化state(从ES6开始 在construct中进行初始化  ES5中使用getInitinalState进行初始化  不过会逐渐被淘汰)
constructor(props){
super(props);
//初始化状态为显示文本  同时定义showText 后面根据showText修改state的值
this.state={showText:true};

//每隔200ms进行取反 隐藏文本操作
//lambda表达式  表示对于一个方法的某个参数的具体实现 也可以用来便利map集合等等
setInterval(()=>{
this.setState({showText:!this.state.showText});
},200);
}
render(){
let display=this.state.showText?this.props.text:' ';
return(
//根据当前的showText的值 决定时候显示text的内容
<Text style={styles.red}>{display}</Text>
);
}
}

class helloReact extends Component {
//渲染
render() {
return (
//设置显示风格 自定义View 显示结果为Hellohello HelloWorld
<View style={{backgroundColor:'yellow'}}>
<Blank text='I want you'/>
<Blank text='I want you1111'/>
<Blank text='I want you2222'/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
red: {
fontSize: 20,
textAlign: 'right',
margin: 10,
color:'#ff0000'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

注意：后声明的样式会覆盖之前的样式