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.