Cómo tener diferentes colores en la parte superior e inferior de SafeAreaView con Iphone X
Nov 26 2020
Esta pregunta ya fue respondida , pero la solución propuesta ya no funciona:
return (
<Fragment>
<SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
<View style={{ flex: 1, backgroundColor: 'white' }} />
</SafeAreaView>
</Fragment>
);
Debería darme:
Me diste en cambio:
Como puede ver, el orden de las vistas no es el mismo.
Tengo el mismo problema en iOS.
Estoy usando react 16.13.1, ¿tal vez algo cambió desde la última respuesta?
Cuales son mis alternativas?
Gracias
Respuestas
1 MoreFoam Nov 26 2020 at 04:26
Lo siguiente funcionó para mí, usando React 16.13.1:
return (
<Fragment>
<SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "red"}}/>
<View style={{flex: 1, backgroundColor: "white"}}/>
<SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "gray"}}/>
</Fragment>
);
Captura de pantalla de iOS:
Captura de pantalla de Android:
LuckyPal Nov 26 2020 at 04:55
En mi experiencia, StatusBarde react-nativefuncionó bien para mí. Ejemplo:
import { StatusBar } from 'react-native';
return (<Fragment>
<StatusBar
backgroundColor="#f00"
barStyle="light-content"
/>
<Fragment>);
Salud.