为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)
backgroundColoropacity //透明度
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‘
参考链接：https://www.jianshu.com/p/ec95efa03312
熟悉react native的css样式
原文地址：https://www.cnblogs.com/the-artist/p/9792131.html