ios - pantalla - ¿Cómo se puede agregar información sobre herramientas flotantes en reaccionar nativo?

herramientas de autocad 2017

Question

Estoy desarrollando una aplicación que lleva al usuario a través de un breve recorrido antes de ir a la página principal de la aplicación (después del registro inicial). Lo que me gustaría hacer es superponer las páginas de la aplicación (que se ven a través de la barra de pestañas) con los siguientes diseños:

Sin embargo, React Native Overlay tiene un historial de dejar muchos errores a su paso, y nunca me ha funcionado personalmente. El módulo React Native ToolTip ya no es compatible y tampoco funciona. ¿Alguna vez alguien ha logrado esto? ¿Si es así, cómo? ¡Gracias por tu consejo!

Answer 1

¿Has intentado crear tu propio tabBarComponent ? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

Puede copiar el tabComponent incorporado y agregar los componentes de ToolTip para renderizar

Answer 2

En lugar de utilizar módulos npm ya existentes, sugiero que escribas tus propias cosas para esto.

Creo que los Modals de react-native te ayudarían a lograr esto, podrías colocar fácilmente diferentes Modals que tendrían tu imagen / texto introductorio a la función y podrías seguir alternando la visibilidad de estos textos / imágenes.

diga que superpone un Modal primero, que en el estado inicial tiene un texto descriptor para la función ''menú'' y luego puede configurar su visibilidad en falso cuando el usuario haga clic en el fondo y active el siguiente elemento visible y así sucesivamente, en el último elemento que desee Cuando se muestra, puede establecer la visibilidad del Modal en falso y continuar con el flujo de la aplicación principal.

¿Eso suena convincente? ?

Answer 3

Tal vez usted simplemente puede crear su componente de información sobre herramientas personalizado. Este es un ejemplo muy básico de cómo hacer que aparezca frente a otros componentes utilizando algunos trucos CSS y propiedades 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 *******************/

ACTUALIZACIÓN : eliminé el widget iframe de Codepen ya que podría confundir a algunos usuarios, por favor siga el enlace de arriba para ver el ejemplo.