反应本机对齐不使用绝对位置

Question

我正在尝试在 React Native 中创建一个小工具提示。在大多数情况下它有效。但是想使用 alignself，自动调整包含文本的视图的大小。它适用于相对位置，但这会将内容推开。绝对位置将工具提示内的所有文本置于彼此下方，工具提示非常窄。

我已经看到一些用于响应本机工具提示的模块，但这些模块使用操作，而我只需要使用文本。

有人知道如何让这个工作吗？

这就是我所拥有的：

constructor(props) {
    super(props);
    this.state = {
        visible: false,
    };
}

toggleStatus() {
    this.setState({visible: true});
    setTimeout(() => {
        this.setState({visible: false});
    }, 3000);
}

toolTip = () => {
    return (
        <View style={styles.containerMain}>
            {renderIf(this.state.visible,
                <View style={styles.tooltipWrapper}>
                    <Text style={styles.tooltipStyle}>{this.props.tooltipText}</Text>
                </View>
            )}
            <View style={styles.questionMarkWrapper}>
                <TouchableOpacity disabled={this.state.visible} onPress={()=>this.toggleStatus()}>
                    <Text style={styles.questionMark}>?</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}
render() {
    return (
        <View style={styles.containerStyle}>
             {this.toolTip()}
        </View>
    )
}

我使用的样式：

containerMain: {
    alignItems: 'flex-end',
},
tooltipWrapper: {
    position: 'absolute',
    top: 0,
    right: 10,
    padding: 5,
    borderRadius: 4,
    backgroundColor: 'rgba(0,0,0,0.6)',
},
tooltipStyle: {
    fontSize: 11,
    color: 'white',
},
questionMarkWrapper: {
    justifyContent: 'center',
    flexDirection: 'row',
    marginRight: 10,
},
questionMark: {
    fontSize: 16,
    color: 'rgba(255,255,255,0.4)',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.4)',
    borderStyle: 'solid',
    height: 26,
    width: 26,
    paddingLeft: 9,
    paddingTop: 2,
}

这是工具提示的样子（不是实际位置）：

这就是它现在的样子：