flex: 可以表示与父控件的比例
-
设置
flexDirection，改变主轴方向
export default class App extends Component<Props> {
render() {
return (
<View style={bigViewStyle.container}>
<Text style={{backgroundColor: 'blue'}}>Text 1</Text>
<Text style={{backgroundColor: 'red'}}>Text 2</Text>
<Text style={{backgroundColor: 'yellow'}}>Text 3</Text>
<Text style={{backgroundColor: 'brown', width: 200}}>Text 4</Text>
</View>
);
}
}
const bigViewStyle = StyleSheet.create({
container: {
marginTop: 30,
flexDirection: 'row',
height: 40,
},
});
image.png
-
使用
flex, 设置比例参数
export default class App extends Component<Props> {
render() {
return (
<View style={bigViewStyle.container}>
<Text style={{backgroundColor: 'blue', flex: 1}}>Text 1</Text>
<Text style={{backgroundColor: 'red', flex: 1}}>Text 2</Text>
<Text style={{backgroundColor: 'yellow', flex: 2}}>Text 3</Text>
<Text style={{backgroundColor: 'brown', width: 200}}>Text 4</Text>
</View>
);
}
}
image.png
-
设置
justifyContent，改变主轴对齐方式
| justifyContent | Value |
|---|---|
flex-start |
左对齐 |
flex-end |
右对齐 |
center |
居中 |
space-between |
有间距 |
space-around |
左右有间距 |
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width
export default class App extends Component<Props> {
render() {
return (
<View style={bigViewStyle.container}>
<View style={firstViewStyle.container}>
<Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
<Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
</View>
<View style={secondViewStyle.container}>
<Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
<Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
</View>
<View style={thirdViewStyle.container}>
<Text style={{backgroundColor: 'red'}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green'}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow'}}>Hellow 3</Text>
<Text style={{backgroundColor: 'purple'}}>Hellow 4</Text>
</View>
</View>
);
}
}
const bigViewStyle = StyleSheet.create({
container: {
flex: 1,
},
});
const firstViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'white',
marginTop: 30,
justifyContent: 'flex-end',
},
});
const secondViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'white',
marginTop: 30,
justifyContent: 'space-between',
},
});
const thirdViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'white',
marginTop: 30,
justifyContent: 'space-around',
},
});
-
效果是这样：
image.png
-
设置
alignItems，改变侧轴对齐方式
| alignItems | Value |
|---|---|
flex-start |
顶对齐 |
flex-end |
底对齐 |
center |
居中 |
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width
export default class App extends Component<Props> {
render() {
return (
<View style={bigViewStyle.container}>
<View style={firstViewStyle.container}>
<Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
<Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
</View>
<View style={secondViewStyle.container}>
<Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
<Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
</View>
<View style={thirdViewStyle.container}>
<Text style={{backgroundColor: 'red', height: 60}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green', height: 30}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow', height: 40}}>Hellow 3</Text>
<Text style={{backgroundColor: 'steelblue', height: 10}}>Hellow 4</Text>
</View>
</View>
);
}
}
const bigViewStyle = StyleSheet.create({
container: {
flex: 1,
},
});
const firstViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'skyblue',
marginTop: 30,
justifyContent: 'flex-end',
alignItems: 'flex-start',
},
});
const secondViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'skyblue',
marginTop: 30,
justifyContent: 'space-between',
alignItems: 'flex-end',
},
});
const thirdViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'skyblue',
marginTop: 30,
justifyContent: 'space-around',
alignItems: 'center',
},
});
-
效果是这样：
image.png
-
设置
flexWrap，让控件换行显示
image.png
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
var Dimensions = require('Dimensions')
let screenWidth = Dimensions.get('window').width
export default class App extends Component<Props> {
render() {
return (
<View style={bigViewStyle.container}>
<View style={firstViewStyle.container}>
<Text style={{backgroundColor: 'red', width: 160}}>Hellow 1</Text>
<Text style={{backgroundColor: 'green', width: 60}}>Hellow 2</Text>
<Text style={{backgroundColor: 'yellow', width: 180}}>Hellow 3</Text>
<Text style={{backgroundColor: 'steelblue', width: 110}}>Hellow 4</Text>
</View>
</View>
);
}
}
const bigViewStyle = StyleSheet.create({
container: {
flex: 1,
},
});
const firstViewStyle = StyleSheet.create({
container: {
flexDirection: 'row',
height: 80,
width: screenWidth,
backgroundColor: 'skyblue',
marginTop: 30,
flexWrap: 'wrap',
},
});
-
效果是这样：
image.png
网友评论