如何在React Native中添加浮动工具提示？

Question

我正在开发一个应用程序，在初始注册后，用户需要完成一个短暂的导览，然后进入应用程序的主页。我想要做的是在Tabbar上显示以下设计的应用程序页面： 然而，React Native Overlay模块存在很多错误，并且从未为我个人工作过。React Native ToolTip模块已不再得到支持，也无法使用。有人实现过这个吗？如果有，如何实现？感谢您的建议！

- Robert Tomas G IV

---

请给出投票反对的理由，以便我可以修改我的问题。 - Robert Tomas G IV

我正在使用 https://github.com/Jpoliachik/react-native-triangle 来绘制三角形和手动创建气泡。同时，我还使用了 react-native-animatable 库来实现动画效果。 - jose920405

Answer 1

不使用已有的npm模块，我建议您为此编写自己的内容。我认为react-native中的Modals可以帮助您实现这一点，您可以轻松地放置不同的Modals，其中包含您的功能介绍文本/图像，并且可以轻松地切换这些文本/图像的可见性。例如，首先叠加一个Modal，其初始状态具有“菜单”功能的描述符文本，然后当用户在背景中单击时将其可见性设置为false，接下来显示下一个项目等等，当您要显示的最后一个项目时，可以将Modal本身的可见性设置为false并继续进行主应用程序流程。听起来说服力足够了吗？

- Suhail Jain

Answer 2

在这种情况下，我更喜欢创建自己的组件作为其中一个答案，但是你可以使用这个组件：react-native-popable

我在一些应用程序中使用它，效果非常好。

- R. Karlus

Answer 3

可以使用这个库来实现工具提示功能：rn-tooltip

- Harshal

Answer 4

我建议尝试下面的插件。 https://github.com/jasongaare/react-native-walkthrough-tooltip

- donkey

Answer 5

你尝试过创建自己的tabBarComponent吗？https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

你可以复制内置的tabComponent，并添加你的ToolTip组件进行渲染。

- Oleksandr Cherniavenko

Answer 6

您可能想尝试以下软件包：

https://github.com/jasongaare/react-native-walkthrough-tooltip

- Erez

Answer 7

你可能对在单个组件中使用框架不感兴趣，但就受欢迎且得到良好支持的库而言，React Native Paper 有一个工具提示组件，是一个强大且广泛使用的库。

- Andrew

Answer 8

更新

抱歉，我忘记更新我的答案了，请让我更详细地解释一下我是如何解决这个问题的。

所以我使用了自己创建的组件，使用样式位置absolute，并使用useRef获取要添加工具提示的组件引用，通过引用获取屏幕上的y位置，将您的工具提示组件放在其上方或根据您拥有的逻辑进行调整，这里是假设。

// Tooltip.js
const styles = StyleSheet.create({
  toolTip: (x, y) => ({
    position: 'absolute',
    left: x,
    top: y
  }),
});

const Tooltip = ({pos}) => {
  return (
    <View style={styles.toolTip(pos.x, pos.y)} >
      <Text>Hi There!</Text>
    </View>
  )
}

// App.js
import {useRef} from 'react';
const bottomNavRef = useRef();
const [tooltip, setTooltip] = useState({visible: false, pos: {x: 0, y: 0}})

const showTooltip = () => {
  const x = bottomNavRef.current.clientX
  const y = bottomNavRef.current.clientY
  setTooltip({ visible: true, pos: {x, y} })
}

...
return (
  <View>
    <Tooltip visible={tooltip.visible} />
    <BottomNav ref={bottomNavRef}>
      ...
    </BottomNav>
  </View>
)

我知道这还没有经过测试，但我发誓这就是你可以创建自己的工具提示的整个想法。

- Marvin

Answer 9

也许你可以创建自定义的工具提示组件。以下是一个非常基本的示例，演示如何使用一些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小部件，因为它可能会让一些用户感到困惑，请按照上面的链接查看示例。

- vtisnado

---

我假设这个答案是针对Web上的React，而不是移动端的React Native。 - AdamG

你有查看CodePen中的示例吗？我猜你没有，因为除了const rootTag = document.getElementById('react-root');之外，所有的代码都是使用React-Native编写的，并且这行代码仅用于Web演示。也许在对答案进行投票前，你应该先仔细阅读它。 - vtisnado

你的回答虽然提供了一个漂亮的工具提示视觉表示，但是很难理解。你展示了一个iFrame代码，一些按钮会带你到404页面，最后如果你深入到iFrame行的中间，你可以找到一个有用的代码URL。如果你能以更好的方式重新呈现它，我将很高兴取消踩。 - AdamG