ReactNative--StyleSheet样式表

样式表就是在view的层次结构布置好了之后，确定大小，位置等属性

样式表可以使用外联也可以使用内联

这就是外联，样式是写在外面的

绿色的是内联样式

最好不要写内联样式，不利于修改和维护

样式最好单独写一个地方，比较容易更改

创建一个样式表使用StyleSheet.create

创建之后里面可以写多个样式，用逗号隔开，样式中的数字不加单位

例子

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var HelloWorld = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
        <View style={[styles.top, styles.border]}>

        </View>
        <View style={[styles.bottom, styles.border, {borderWidth:5}]}>

        </View>
      </View>
    );
  }
});

//定义样式
var styles = StyleSheet.create({
  container:{
    marginTop:25,
    marginLeft:30,
    backgroundColor:"red",
    width:300,
    height:400
  },
  top:{
    backgroundColor:"green",
    height:250,
    margin:10,
  },
  bottom:{
    backgroundColor:"yellow",
    height:110,
    margin:10,
  },
  border:{
    borderWidth:3,
    borderColor:"black",
  }
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

 

转载于:https://www.cnblogs.com/chebaodaren/p/6510476.html