react-native - 如何在 React Native 中将文本 float 到另一个文本上

Question

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

这就是当前代码的样子:

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

我的问题在这里，因为文本与完整框居中对齐，我无法为文本和图标设置 flex 值，因为这将使它们拥有自己的空间并且不会 float 。
你能帮忙吗。如果您需要更多信息，请告诉我。

Answer 1

尝试将它们放在 buttonHolder 中的绝对 View 中.套装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'
    }
})