为react-native组件创建样式属性有两种方法(转)

第一种是在组件的style属性中直接插入一个包含样式属性的js对象：

export default class App extends Component<Props> {
    render(){
 　　  return{
 　　        <View>
     　　        <Text style={{backgroundColor:'black'}}>
         　　        这是一种设置方式，即直接添加一个js对象
     　　        </Text>
     　　        <Text style={{backgroundColor:'red'}}>
         　　        在jsx语法中，遇到'{'，就会认为开始执行js，直到遇到'}'结束；
         　　        遇到'<'，就会认为需要把它编译为html元素，直到遇到'>'结束；
    　　        </Text>
 　　        </View>
      }
   }
}

 

第二种是使用StyleSheet创建一个样式表对象：

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>I Love React Native!</Text>
        <Text style={styles.instructions}>来吧？</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text style={styles.instructions}>下午练手</Text>
      </View>
    );
  },  
}

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

属性列表

1.宽高

width  //宽
height //高

 

2.背景颜色(backgroundColor)

backgroundColor
opacity //透明度

 

3.边框(border)

//边框圆角设置
borderTopLeftRadius  //左上角圆角
borderTopRightRadius //右上角的圆角
borderBottomLeftRadius //左下角的圆角
borderBottomRightRadius //右下角的圆角
borderRadius //所有角的圆角

//边框宽度
borderLeftWidth  //左边边框宽度
borderRightWidth //右边边框宽度
borderTopWidth //顶部边框宽度
borderBottomWidth //底部边框宽度
borderWidth  //所有边框宽度

//边框颜色
borderColor //边框颜色

 

4.外边距(margin)

marginBottom  //距下外边距
marginLeft  //距左外边距
marginRight  //距右外边距
marginTop  //距上外边距
marginVertical  //垂直外边距(也就是距上,距下边距)
marginHorizontal //水平外边距(距左,距右边距)
margin //所有边距

 

5.内边距

paddingBottom  //距下内边距
paddingLeft  //距左内边距
paddingRight  //距右内边距
paddingTop  //距上内边距
paddingVertical//垂直内边距
paddingHorizontal  //水平内边距
padding //所有内边距

 

6.文字

color  //文字颜色
textAlign  //对其方式 ('left','right','auto','center','justify')
fontSize //字体大小
fontStyle //字体风格 正常:'normal', 斜体:'italic'
fontWeight //字体粗细 加粗:'bold', '100', '200' 
letterSpacing //字符间距
lineHeight //行间距
textDecorationLine //字体装饰线 下划线:'underline', 删除线:'line-through',下划线删除线:'underline line-through'
textDecorationStyle //字体装饰线风格 单线:'solid' 双线:'double' 虚线:'dotted','dashed'
textDecorationColor //字体装饰线颜色

 

7.图像

//图像变换
scaleX //水平方向缩放
scaleY //垂直方向缩放
rotation //旋转
translateX //水平方向平移
translateY //水平方向平移
resizemode  //拉伸图片 'cover' ,'strech','contain'