样式
原文地址,
原文地址2,本文为原文不完全翻译
在ReactNative,是通过使用JavaScript来设置样式的,全部的核心组件都拥有style这个属性,这些样式的名字和值都和CSS一一对应,唯一的不同就是ReactNative使用的是驼峰命名,如backgroundColor而不是background_color.
style属性和JavaScript是一样的,下面的例子就是style的简单使用,可以见到style是可以接收一个数组的,不过这时候数组的最后一个成员拥有最高优先权,所以你可以利用这个特性来集成与改写style
为了代码的整洁性,一般都是使用StyleSheet.create方法在一个地方定义好几个style
import React, { Component } from 'react';
import {AppRegistry, StyleSheet,Text, View} from 'react-native';
class alotStyles extends Component {
render(){
return (
<View>
<Text style={styles.red}>justred</Text>
<Text style={styles.bigred}>bigred</Text>
<Text style={styles.bigblue}>bigblue</Text>
<Text style={styles.red,styles.bigblue,styles.blue}>mixture</Text>
</View>
)
}
}
const styles = StyleSheet.create({
red:{
color:'#FF0000'
},
blue:{
color:'#0000FF'
},
bigred:{
color:'#FF0000',
fontSize:30,
fontWeight:'bold'
},
bigblue:{
color:'#0000FF',
fontSize:30,
fontWeight:'bold'
},
})
AppRegistry.registerComponent('alotStyles',()=>alotStyles);
Paste_Image.png
宽与高
一个组件的宽与高决定了组件在屏幕上面的尺寸
固定尺寸
控制组件位置最简单的方式就是给它一个固定的宽高,ReactNative的组件尺寸单位是dip(设备无关像素)
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
Paste_Image.png
这种写法只适用于尺寸在各个大小不同的手机屏幕上都一样的情况,所以用得不多.
可变尺寸
适用属性flex可以让组件在一个有效的空间内按比例缩放,一般情况下我们赋值flex=1,这意味着让组件尽可能地填充有效空间,并且根据在同一个父控件中的兄弟控件的flex的值等比例分配空间
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class FlexDimensionsBasics extends Component{
render(){
return(<View style={{height:100, width:100}}>
<View style={{flex:1, backgroundColor: 'powderblue'}} />
<View style={{flex:1, backgroundColor: 'skyblue'}} />
<View style={{flex:1, backgroundColor: 'steelblue'}} />
</View>)
}
}
AppRegistry.registerComponent('FlexDimensionsBasics', () => FlexDimensionsBasics);
Paste_Image.png
