Как избежать выемки с контекстом области просмотра в нативных приложениях ReactCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Как избежать выемки с контекстом области просмотра в нативных приложениях React

Сообщение Anonymous »

На протяжении всей жизни я не могу понять, как удалить эти белые полосы, выемки (или набившись) в верхней и нижней части экрана. But if I change the background color of the container to say "red", it changes.
What I've Tried:

[*]Setting the width and height of the Lottie animation using Dimensions.get('window')
[*]Using position: 'absolute' on both the container and animation
Заменить представление с помощью SafeareaView < /li>
Использование Statusbar с прозрачным и FounderColor = "Transparent" < /li>
Пробовал удалить сет /> < /ul>
Соответствующие файлы: < /strong>
App.js
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './screens/Home'

const Stack = createStackNavigator()

export default function App() {
return (





);
}
< /code>
home.js
import React from 'react';
import LottieView from 'lottie-react-native';
import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';

export default function Home({ navigation }) {
return (



Welcome to Vitola
Find the best cigars for every moment.
navigation.navigate('MainApp')}>
Get Started

navigation.navigate('Login')}>
Already have an account? Log in



);
}

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
container: {
flex: 1,
},
background: {
width,
height,
position: 'absolute',
},
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 30,
},
title: {
fontSize: 28,
fontWeight: 'bold',
color: '#fff',
marginBottom: 10,
},
subtitle: {
fontSize: 16,
color: '#ddd',
marginBottom: 40,
textAlign: 'center',
},
button: {
backgroundColor: '#fff',
paddingVertical: 12,
paddingHorizontal: 40,
borderRadius: 25,
marginBottom: 20,
},
buttonText: {
color: '#000',
fontWeight: 'bold',
fontSize: 16,
},
loginText: {
color: '#fff',
textDecorationLine: 'underline',
},
});
< /code>
Как сделать анимацию Lottie по-настоящему заполнить экран к краю до белых полос вверху или внизу-независимо от устройства или ОС? Есть ли конкретный способ правильно учесть строку статуса и безопасную область?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ative-apps
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»