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

最新推荐文章于 2022-04-22 15:44:37 发布

youth_never_go_away

最新推荐文章于 2022-04-22 15:44:37 发布

阅读量503

点赞数

本文链接：https://blog.csdn.net/Youth_never_go_away/article/details/52525427

版权

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,
  },
});