react-native-elements/Tooltip 3.4.2子元素偏移修复及可用组件推荐

问题表现 #

使用3.4.2版本的react-native-elements/Tooltip时，被包裹的子元素（图标/文本）会出现向上偏移的情况，运行效果如下：

偏移问题修复方案 #

该版本的Tooltip组件默认会给子元素外层添加无对齐规则的容器，导致行内元素偏移，可通过以下任一方法修复：

1. 给Tooltip包裹的子元素外层套一层带对齐规则的View，修改后的代码如下：

render() {
    return (
        <View>
            <Text style={styles.pageTitle}>{this.props.messages.account}</Text>
            <View style={styles.horizontalFlex}>
                <Text
                    style={styles.userInfo}>{this.props.messages.subscriptionModel}: {this.props.route.params.userProfile}
                </Text>
                <Tooltip popover={<Text>Info here</Text>}>
                    {/* 新增外层View设置对齐 */}
                    <View style={{justifyContent: 'center', alignSelf: 'center'}}>
                        <EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
                    </View>
                </Tooltip>
            </View>
        </View>
    );
}

2. 给Tooltip组件添加containerStyle属性覆盖默认样式：

<Tooltip 
  popover={<Text>Info here</Text>}
  containerStyle={{justifyContent: 'center', alignSelf: 'center', margin: 0, padding: 0}}
>
  <EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
</Tooltip>

3. 升级到react-native-elements v4+版本（新版包名为@rneui/base和@rneui/themed），官方已在新版本中修复了该样式冲突问题。

稳定可用的React Native Tooltip组件推荐 #

• @rneui/themed/Tooltip：react-native-elements官方重构后的新版组件，修复了旧版几乎所有已知的Tooltip bug，维护活跃，适合已经在使用RNE UI库的项目
• react-native-popover-view：轻量无第三方依赖，支持自定义弹出位置、动画、点击区域关闭，多生产场景验证过稳定性，适合不需要整套UI库的项目
• react-native-tooltip：纯JS实现，双端渲染表现一致，配置项简单，适合仅需要基础tooltip功能的轻量化场景

内容的提问来源于stack exchange，提问作者JollyRoger