React native 对自身不使用绝对位置进行反应

我试图在react native中创建一个小的工具提示。在大多数情况下，它是有效的。但要使用alignself自动调整包含文本的视图的大小。它与相对位置一起工作，但这会将内容推开。“绝对位置”（Position absolute）将工具提示中的所有文本置于彼此下方，并且工具提示非常窄

我已经看到了一些react本机工具提示模块，但是这些模块使用动作，我只需要使用文本

有人知道如何让它工作吗

这就是我所拥有的：

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,
}