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

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

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

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

Источник

9 ответов

Вместо того, чтобы использовать уже существующие модули npm, я предлагаю написать для этого свой собственный материал.

я думаю, что модалы от реактивного носителя помогут вам достичь этого, вы можете легко разместить различные модалы, которые будут содержать вводный текст / изображение, и вы сможете легко переключать видимость этих текстов / изображений.

скажем, что вы сначала накладываете модал, который в начальном состоянии имеет текст дескриптора для функции "меню", а затем вы можете установить его видимость на "ложь", когда пользователь нажимает на фон, и делает следующий элемент видимым и так далее, на последнем элементе, который вы хотите чтобы получить отображение, вы можете установить видимость самой модальной модели на false и перейти к основному потоку приложений.

это звучит убедительно??

Источник

Вы пытались создать свой собственный tabBarComponent? https://reactnavigation.org/docs/navigators/tab

Вы можете скопировать встроенную вкладку tabComponent и добавить компоненты всплывающей подсказки для рендеринга.

Источник

Вы можете попробовать следующий пакет:

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

Источник

Я рекомендовал попробовать плагин ниже.https://github.com/jasongaare/react-native-walkthrough-tooltip

Источник

Возможно, вас не заинтересует использование фреймворка для одного компонента, но с точки зрения популярных и хорошо поддерживаемых библиотек React Native Paper имеет компонент всплывающей подсказки и является надежной и широко используемой библиотекой.

Источник

Tooltip functionality can be implemented using this lib: rn-tooltip

Источник

Я предпочитаю создать свой собственный компонент в этом случае в качестве одного из ответов, НО вы можете использовать этот компонент: react-native-popable

Я использую его в некоторых приложениях, и он очень хорошо работает.

Источник

2, вы можете использовать встроенный модуль react-native-elements или создать свой собственный компонент всплывающей подсказки со свойством стиля position: 'absolute' просто убедитесь, что все смещения x и y должны реагировать на все устройства, просто используйте Dimension из react-native сделать это.

Пожалуйста.

Источник

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

ОБНОВЛЕНИЕ: Я удалил виджет iframe Codepen, поскольку он может запутать некоторых пользователей, перейдите по приведенной выше ссылке, чтобы увидеть пример.

Источник
Другие вопросы по тегам