На протяжении всей жизни я не могу понять, как удалить эти белые полосы, выемки (или набившись) в верхней и нижней части экрана. 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
Как избежать выемки с контекстом области просмотра в нативных приложениях React ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Как избежать выемки с контекстом области просмотра в нативных приложениях React
Anonymous » » в форуме Javascript - 0 Ответы
- 2 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Как избежать выемки с контекстом области просмотра в нативных приложениях React
Anonymous » » в форуме CSS - 0 Ответы
- 2 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Как избежать выемки с контекстом области просмотра в нативных приложениях React
Anonymous » » в форуме CSS - 0 Ответы
- 2 Просмотры
-
Последнее сообщение Anonymous
-