Как вы можете добавить плавающие всплывающие подсказки в ответ на native?

Я разрабатываю приложение, которое берет пользователя через короткий тур до перехода на главную страницу приложения (после первоначальной регистрации). То, что я хотел бы сделать, - наложить страницы приложения (видимые через панель) со следующими проектами:

введите описание изображения здесь

Однако React Native Overlay имеет историю оставления множества ошибок на своем пути - и он никогда не работал у меня лично. Модуль React Native ToolTip больше не поддерживается и не работает. Кто-нибудь когда-либо делал это? Если да, то как? Спасибо за ваш совет!

Ответы

Ответ 2

Возможно, вы можете просто создать свой собственный компонент всплывающей подсказки. Вот очень простой пример того, как заставить его появляться перед другими компонентами, используя некоторые трюки 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, так как он может запутать некоторых пользователей, пожалуйста, следуйте приведенной выше ссылке, чтобы увидеть пример.