ReactNative中的基础样式

在ReactNative中有很多组件，组件的属性各有不同，但是也有些基础通用的样式。这里的样式在iOS中验证通过，Android暂时没有测试。

首先有一个可运行的react-native的程序。

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

export default class AwsomeProject extends Component {
  render() {
    return (
      <View style={style.container}>

      </View>
    );
  }
}


//这里修改样式
const style = StyleSheet.create({

  container:{
    flex : 1,
    backgroundColor:'#eae7ff',
    margin:30
  }

});

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

那么在container中就可以修改相关样式了。其中flex涉及flexbox的布局，不做解释。其他的相关基础样式修改列表内容如下。

  内边距：
  padding：10

  外边距：  
  margin:30

  外边距离顶部的位置
  marginTop:20,

  外边距离底部的位置
  marginBottom:20,

  四周边框的距离
  borderWidth:1

  边框颜色
  borderColor:'#ff0000'

  周边边角：
  borderRadius：16

  阴影颜色
  shadowColor：‘#ff0000’

  阴影透明度：
  shadowOpacity：0.5

  阴影扩散度：
  shadowRadius：2

  阴影偏移 （这个是一个对象）
  shadowOffset：{
    height： 1，  //垂直方向的偏移
    width：0   //水平方向的偏移
  }