¿Cómo desde arriba se reemplaza la barra de estado?

En React Native iOS, me gustaría deslizar hacia adentro y hacia afuera un – asumiendo que se implementa como tal – como las siguientes imágenes.

Este es el resultado:

enter image description here

Aquí está el código completo para que funcione. No funcionará en RNPlay porque zIndex no es compatible con la versión que tienen.

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, StatusBar, View, TouchableHighlight, Animated } from 'react-native'; class playground extends Component { constructor(props) { super(props); this.state = { slideAnimation: new Animated.Value(22), }; } _showNotification() { StatusBar.setHidden(true, 'slide'); Animated.timing( this.state.slideAnimation, {toValue: 0, duration: 300} ).start(); } _hideNotification() { StatusBar.setHidden(false, 'slide'); Animated.timing( this.state.slideAnimation, {toValue: 22, duration: 300} ).start(); } render() { return (    This is a notification    { this._showNotification() }}>  Show Notification    { this._hideNotification() }}>  Hide Notification     ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, body: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', //This is important to hide the notification, because it is actually behind it marginTop: 22, //This will make a gap of the same height in the top, so that the notification can slide in it. }, button: { padding: 10, borderColor: '#D1EEFC', borderWidth: 2, borderRadius: 5, marginBottom: 22, }, buttonText: { fontSize: 17, textAlign: 'center', color: '#007AFF' }, notification: { backgroundColor: 'black', position: 'absolute', top: 22, //Move the notification downwards to setup the scene. left: 0, right: 0, height: 22, //Make it the same height as the status bar zIndex: 0, //This is what makes the notification benhind the container }, notificationText: { color: 'yellow', textAlign: 'center', fontSize: 11, marginTop: 4 }, }); AppRegistry.registerComponent('playground', () => playground); 

ACTUALIZAR

Logré hacer que funcione el concepto de enmascaramiento al envolver la notificación dentro de una vista con el desbordamiento de estilo: ‘oculto’. El contenedor se establece en altura: 22. Por lo tanto, si la notificación se mueve incluso 1 pt, parecerá que la notificación se desliza: en segundo plano.

Este es el resultado:

enter image description here

Aquí está el código:

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, StatusBar, View, TouchableHighlight, Animated, Image } from 'react-native'; class playground extends Component { constructor(props) { super(props); this.state = { slideAnimation: new Animated.Value(22), }; } _showNotification() { StatusBar.setHidden(true, 'slide'); Animated.timing( this.state.slideAnimation, {toValue: 0, duration: 300} ).start(); } _hideNotification() { StatusBar.setHidden(false, 'slide'); Animated.timing( this.state.slideAnimation, {toValue: 22, duration: 300} ).start(); } render() { return (      This is a notification    { this._showNotification() }}>  Show Notification    { this._hideNotification() }}>  Hide Notification    ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', justifyContent: 'center', alignItems: 'center', }, backgroundImage: { position: 'absolute', top: 0, }, button: { padding: 10, borderRadius: 5, marginBottom: 22, backgroundColor: '#FFFFFF88', }, buttonText: { fontSize: 17, textAlign: 'center', color: '#000000' }, notificationContainer: { position: 'absolute', top: 0, left: 0, right: 0, height: 22, overflow: 'hidden' //This is the magic trick to do the masking. }, notification: { backgroundColor: '#00000088', position: 'absolute', top: 22, left: 0, right: 0, height: 22, }, notificationText: { color: 'yellow', textAlign: 'center', fontSize: 11, marginTop: 4 }, }); AppRegistry.registerComponent('playground', () => playground); 

Aquí hay una manera en que podrías hacerlo.

Utilice una que está posicionada absolutamente. Querrá que los estilos de posición sean así:

 position: 'absolute', top: 0, left: 0, height: 20 

Luego, dentro de la vista, querrá un elemento Animated , ya sea un elemento Ver o Texto. Desearía que la vista anidada y animada se coloque “fuera de pantalla” en su vista superior y luego, en el método componentWillMount de su componente, configure el texto para animar desde debajo de la vista hasta que aparezca en la vista. Eso le dará el deslizamiento en efecto para su texto. Aquí es donde puede obtener más información sobre la biblioteca animada : Documentos RN animados.

Finalmente, parece que también quiere que la barra de estado se oculte simultáneamente, por lo que tendría que establecerla oculta y animar esa acción. Eso se puede hacer fácilmente, revisa los RN Docs para StatusBar

Si tiene problemas, publique un código en su pregunta y puedo ayudar a solucionarlo.