以下是我要尝试实现的示例,以下是组件结构的细分
<View style={styles.buttonHolder}>
<Text style={styles.greenButtonIcon}>
FB
</Text>
<Text style={styles.greenButtonText}>
{this.props.buttonName}
</Text>
</View>
我的问题在这里,因为文本中心对齐整个框我不能有文本和图标的弹性值,因为这将使他们有自己的空间,不会漂浮。
你能帮忙吗?如果您需要更多信息,请告诉我。答案 0 :(得分:3)
尝试将它们置于buttonHolder
内的绝对视图中。将buttonHolder
设置为justifyContent
和alignItems
中心。然后将绿色按钮alignSelf
设为flex-start
:
<View style={styles.buttonHolder}>
<View style={styles.absolute}>
<Text style={styles.greenButtonIcon}>
FB
</Text>
</View>
<View style={styles.absolute}>
<Text style={styles.greenButtonText}>
{this.props.buttonName}
</Text>
</View>
</View>
const styles = StyleSheet.create({
absolute: {
position: 'absolute',
height: '100%',
width: '100%',
alignContent: 'center',
justifyContent: 'center'
},
styles.greenButtonIcon: {
alignSelf: 'flex-start'
}
})
答案 1 :(得分:0)
React native支持使用zIndex,类似于CSS,指定要浮动较高zIndex的项目,另一项指定较低的zIndex。