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

Question

我正在开发一个应用程序,在进入应用程序的主页面之前(初始注册后)让用户通过一个简短的游览.我想做的是使用以下设计覆盖应用页面(通过标签栏看到):

然而,React Native Overlay有一段历史,它遗留了很多错误 - 它也没有为我个人工作过.React Native ToolTip模块不再受支持,也不起作用.有没有人做过这个？如果是这样,怎么样？感谢您的意见!

Answer 1

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