React native 反应本机:将绝对定位视图与左/右中心对齐
我想构建一个可重用组件,它可以停靠到父容器的任何边缘,请参考下图 我不能对块使用flex,因为在父容器中应该有在它们后面渲染的内容 到目前为止,我只尝试过左对齐,但它没有按照我想要的方式工作React native 反应本机:将绝对定位视图与左/右中心对齐,react-native,react-native-stylesheet,React Native,React Native Stylesheet,我想构建一个可重用组件,它可以停靠到父容器的任何边缘,请参考下图 我不能对块使用flex,因为在父容器中应该有在它们后面渲染的内容 到目前为止,我只尝试过左对齐,但它没有按照我想要的方式工作 // styles.js import { StyleSheet } from 'react-native' import { COLOR, BORDER_RADIUS } from 'app/constants' export default StyleSheet.create({ contain
// styles.js
import { StyleSheet } from 'react-native'
import { COLOR, BORDER_RADIUS } from 'app/constants'
export default StyleSheet.create({
container: {
alignItems: 'center',
},
box: {
borderWidth: 1,
borderColor: COLOR.grey_cl,
borderRadius: BORDER_RADIUS.normal,
backgroundColor: 'red',
},
boxTopAligned: {},
boxRightAligned: {},
boxBottomAligned: {},
containerLeftAligned: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
},
boxLeftAligned: {
textAlign: 'center',
left: 0,
transform: [{ rotate: '90deg' }],
},
})
JSX
{props.text}
这很有效,但不是我想要的方式
代码
以及输出结果
用
containerLeftAligned
样式仅为
<View style={[[styles.container, styles.containerLeftAligned]]}>
<View
style={[
HELPER_STYLES.paddingNormal,
HELPER_STYLES.center,
styles.box,
styles.boxLeftAligned,
]}
>
<Text>{props.text}</Text>
</View>
</View>
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class Jojo extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<View style={[[styles.container, styles.containerLeftAligned]]}>
<View style={[styles.box, styles.boxLeftAligned]}>
<Text>left</Text>
</View>
</View>
<View style={[styles.box, styles.boxTopAligned]}>
<Text>top</Text>
</View>
<View style={[[styles.container, styles.containerRightAligned]]}>
<View style={[styles.box, styles.boxRightAligned]}>
<Text>right</Text>
</View>
</View>
<View style={[styles.box, styles.boxBottomAligned]}>
<Text>bottom</Text>
</View>
</View>
);
}
}
container: {
alignItems: 'center', }, box: {
borderWidth: 1,
borderColor: 'grey',
borderRadius: 15,
padding: 15,
backgroundColor: 'red',
alignSelf: 'center', }, boxTopAligned: {
position: 'absolute',
top: 0,
alignItems: 'stretch', }, boxBottomAligned: {
position: 'absolute',
bottom: 0,
alignItems: 'stretch', }, containerLeftAligned: {
position: 'absolute',
left: 0,
top: '50%',
alignItems: 'stretch', }, boxLeftAligned: {
textAlign: 'center',
left: 0,
transform: [{ rotate: '90deg' }], }, boxRightAligned: {
textAlign: 'center',
right: 0,
transform: [{ rotate: '90deg' }], }, containerRightAligned: {
position: 'absolute',
right: 0,
top: '50%',
alignItems: 'stretch', },