React native 如何在React Native中将一个文本浮动到另一个文本上

下面是我试图实现的一个示例，下面是组件结构的分解

这就是目前的代码：

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

食品饮料
{this.props.buttonName}

我这里的问题是，因为文本的中心与整个框对齐，所以我不能为文本和图标设置弹性值，因为这会使它们有自己的空间，并且不会浮动

---

你能帮忙吗。如果您需要更多信息，请务必告诉我。

尝试将它们放在

按钮文件夹中的绝对视图中。将
buttonHolder
设置为
justify content
和
alignItems
居中。然后将绿色按钮
自对齐
至
柔性启动
：

<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'
    }
})


食品饮料
{this.props.buttonName}
const styles=StyleSheet.create({
绝对：{
位置：'绝对'，
高度：“100%”，
宽度：“100%”，
对齐内容：“中心”，
为内容辩护：“中心”
},
styles.greenButtonIcon：{
alignSelf:“灵活启动”
}
})
React native支持使用zIndex，与CSS类似，将要浮动的项指定为更高的zIndex，将另一项指定为更低的zIndex
 将图标的位置设置为绝对位置怎么样？它应该包含在视图
styles.buttonHolder
wow中，太快了，谢谢，太完美了。我添加的唯一一件事和其他任何人参考的证明内容：“中心”，并将项目“中心”对齐到buttonHolderMy愉悦兄弟@KD.：）