如何在React Native中的另一个文本上浮动文本

时间:2017-05-27 04:59:28

标签: react-native react-native-flexbox

enter image description here

以下是我要尝试实现的示例,以下是组件结构的细分

enter image description here 这就是目前的代码:

             <View style={styles.buttonHolder}>
                <Text style={styles.greenButtonIcon}>
                    FB
                </Text>
                <Text style={styles.greenButtonText}>
                    {this.props.buttonName}
                </Text>
            </View>

我的问题在这里,因为文本中心对齐整个框我不能有文本和图标的弹性值,因为这将使他们有自己的空间,不会漂浮。

你能帮忙吗?如果您需要更多信息,请告诉我。

2 个答案:

答案 0 :(得分:3)

尝试将它们置于buttonHolder内的绝对视图中。将buttonHolder设置为justifyContentalignItems中心。然后将绿色按钮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。