Str*_*yer 3 css css3 flexbox react-native
我正在尝试创建一种布局,该布局利用flexbox的自动大小调整功能,但也包含固定大小的项目:
<View style={{ height: 70, alignItems: "center" }}>
<Text style={{ flex: 1, textAlign: "right", paddingRight: 10 }}>left text</Text>
<Image style={{ width: 70, height: 70 }} src={require('./img.png')} />
<Text style={{ flex: 1, textAlign: "left", paddingLeft: 10 }}>right text</Text>
</View>
Run Code Online (Sandbox Code Playgroud)
我希望图像在UI中居中,并让文本视图同样占据剩余的宽度。实际结果是,其中一个文本视图比另一个文本视图大,好像渲染未考虑图像视图的宽度。
终于找到了正确的方法。要在Flex布局中使用固定大小的项目,则不应使用width / height,而应使用flex:0和flexBasis。这种方法最初对我不起作用,因为包装我的组件的组件的尺寸不正确,并且与flex渲染混乱。将flexBasis设置为绝对数时,它似乎是与密度无关的像素。
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
<Text>Test</Text>
<View style={styles.container}>
<Text style={styles.text1}>{"Left\nText"}</Text>
<View style={styles.view} />
<Text style={styles.text2}>Test</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
view: {
flex: 0,
flexBasis: 50,
height: 50,
backgroundColor: "red",
},
text1: {
flex: 1,
textAlign: "right",
paddingRight: 10,
},
text2: {
flex: 1,
textAlign: "left",
paddingLeft: 10,
}
});
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
667 次 |
最近记录: |