如何解决React-Native中的Flexbox对齐问题
我正在尝试将View组件的内容对齐到屏幕的左侧和右侧。不幸的是,无论我做什么,我只能对齐父视图,而不能对齐子视图组件。
在以下摘录中, 项目 是父视图, leftIcon 和 title 应该在左侧对齐,而 rightArrow 应该在右侧对齐。
<TouchableOpacity onPress={() => navigation.navigate(`${item.page}`)}>
<View style={styles.item}>
<Text style={styles.leftIcon}>a</Text>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.rightArrow}> > </Text>
</View>
</TouchableOpacity>
const styles = StyleSheet.create({
item: {
//backgroundColor: '#f9c2ff',paddingTop: 7,marginVertical: 4,marginHorizontal: 16,flex: 1,flexDirection: 'row',},leftIcon: {
fontSize: 25,paddingRight: '5%',alignSelf: 'flex-start',title: {
fontSize: 25,rightArrow: {
fontSize: 25,alignSelf: 'flex-end'
}
});
这可能是不正确的方法,但是可以怎么做呢?
解决方法
您可以在leftIcon
样式的视图中包装title
和flexDirection: 'row'
。
然后将justifyContent: 'space-between'
添加到您的item
样式中。
示例(使用内联样式):
<TouchableOpacity>
<View
style={{
marginVertical: 4,marginHorizontal: 16,flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',}}>
<View style={{ flexDirection: 'row' }}>
<Text
style={{
fontSize: 25,paddingRight: '5%',}}>
a
</Text>
<Text style={{ fontSize: 25 }}>Title</Text>
</View>
<Text style={{ fontSize: 25 }}> > </Text>
</View>
</TouchableOpacity>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。