Question

我正在尝试用native 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,
}

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

这就是现在的样子：

反应原生对齐自己不与绝对位置一起工作

0 个答案: