Question

我正在开发一个应用程序，在进入应用程序的主页面之前（初始注册后），用户可以通过一个简短的游览。我想要做的是使用以下设计覆盖应用页面（通过标签栏看到）：

然而，React Native Overlay的历史遗留下了很多错误 - 它也没有对我个人起作用。 React Native ToolTip模块不再受支持，也不起作用。有没有人做过这个？如果是这样，怎么样？谢谢你的建议！

Answer 1

我建议不要使用现有的npm模块，而是为此编写自己的东西。

我认为来自react-native的Modals可以帮助您实现这一目标，您可以轻松地放置不同的Modals，这些Modals具有您的功能介绍文本/图像，您可以轻松地切换这些文本/图像的可见性。

首先覆盖一个Modal，它在初始状态下具有＆＃39; menu＆＃39;的描述符文本。功能，然后您可以在用户在后台单击并将下一个项目显示为可见时将其可见性设置为false，在您要显示的最后一项上，您可以将Modal本身的可见性设置为false并继续使用main app flow。

听起来有说服力吗？？

Answer 2

您是否尝试创建自己的tabBarComponent？ https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

您可以复制内置tabComponent并添加工具提示组件以进行渲染

Answer 3

工具提示功能可以使用以下lib来实现：rn-tooltip

Answer 4

2 个选项，您可以使用嵌入式模块 react-native-elements 或创建自己的 Tooltip 组件，样式属性为 position: 'absolute' 只需确保所有偏移量 x 和 y 必须对所有设备进行响应，只需使用 Dimension 中的 react-native 来制作它。

不客气。

Answer 5

也许您可以创建自定义工具提示组件。这是一个非常基本的例子，说明如何使用一些CSS技巧和zIndex属性使它出现在其他组件的前面：https://codepen.io/vtisnado/pen/WEoGey

class SampleApp extends React.Component {
  render() {
    return (
      /******************* RENDER VISUAL COMPONENTS *******************/
      <View style={styles.container}>
        <View style={styles.mainView}>
          {/* Start: Tooltip */}
          <View style={styles.talkBubble}>
            <View style={styles.talkBubbleSquare}>
              <Text style={styles.talkBubbleMessage}>Put whatever you want here. This is just a test message :)</Text>
            </View>
            <View style={styles.talkBubbleTriangle} />
          </View>
          {/* End: Tooltip */}
          <View style={styles.anotherView} /> {/* The view with app content behind the tooltip */}
        </View>
      </View>
      /******************* /RENDER VISUAL COMPONENTS *******************/
    );
  }
}

/******************* CSS STYLES *******************/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  mainView: {
    flex: 1,
    flexDirection: 'row',
  },
  talkBubble: {
    backgroundColor: 'transparent',
    position: 'absolute',
    zIndex: 2, // <- zIndex here
    flex: 1,
    left: 20,
    //left: (Dimensions.get('window').width / 2) - 300, // Uncomment this line when test in device.
    bottom: 60,
  },
  talkBubbleSquare: {
    width: 300,
    height: 120,
    backgroundColor: '#2C325D',
    borderRadius: 10
  },
  talkBubbleTriangle: {
    position: 'absolute',
    bottom: -20,
    left: 130,
    width: 0,
    height: 0,
    borderLeftWidth: 20,
    borderRightWidth: 20,
    borderTopWidth: 20,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: '#2C325D',
  },
  talkBubbleMessage: {
    color: '#FFFFFF',
    marginTop: 40,
    marginLeft: 20,
    marginRight: 20,
  },
  anotherView: {
    backgroundColor: '#CCCCCC',
    width: 340,
    height: 300,
    position: 'absolute',
    zIndex: 1, // <- zIndex here
  },
});
/******************* /CSS STYLES *******************/

更新：我删除了Codepen iframe小部件，因为它可能会让一些用户感到困惑，请按照上面的链接查看示例。

如何在本机中添加浮动工具提示？

5 个答案: