指定宽度和高度
react-native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import { AppRegistry,Text,View,StyleSheet,} from 'react-native';
export default class WidthHeight extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View>
<View style={{ width: 100,height: 50,backgroundColor: 'red' }}>
<Text>美丽的夜晚</Text>
</View>
<View style={{ width: 200,height: 100,backgroundColor: 'blue' }}>
<Text>我在等你</Text>
</View>
<View style={{ width: 300,height: 150,backgroundColor: 'yellow' }}>
<Text>好喜欢你</Text>
</View>
</View>
)
}
}
AppRegistry.registerComponent('xiao', () => WidthHeight);
弹性(Flex)宽高
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import { AppRegistry,Text,View,StyleSheet,} from 'react-native';
export default class WidthHeight extends Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={{ flex: 1}}>
<View style={{ flex: 1,backgroundColor: 'red' }}>
<Text>美丽的夜晚</Text>
</View>
<View style={{ flex: 1,backgroundColor: 'blue' }}>
<Text>我在等你</Text>
</View>
<View style={{ flex: 1,backgroundColor: 'yellow' }}>
<Text>好喜欢这夜色</Text>
</View>
</View>
)
}
}
AppRegistry.registerComponent('xiao', () => WidthHeight);
上面用的是flex布局,有不懂的同学可以去看阮一峰的教程。