Executando verificação de segurança...
1
Leoted
1 min de leitura ·

[Dúvida] View React native/Expo não está ocupando a tela inteira

Eu tenho um projeto bem simples em React Native, com a ferramenta do expo, mas o componente que estou utilizando como contâiner não está funcionando como desejado. Segue o código da página em questão:

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}></View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue'
  },
});

Contudo, a View com o estilo container é renderizada da seguinte maneira(ocupando apenas o que seria a safe area da tela):

Imagem do erro

Segue também o script que uso para gerenciar as telas:

import * as React from 'react';
import { View } from 'react-native';
import App from './home';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function MyStack() {
    return (
        <NavigationContainer independent={true}>
           <Stack.Navigator screenOptions={{headerShown: false}}>
              <Stack.Screen name="Home" component={App}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
};
Carregando publicação patrocinada...
1
1
1
silvestrini

Cola esse código e vê se funciona

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'blue' }}>
      <Text style={{color: 'white'}}>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} options={{headerShown: false}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
1
Leoted
Autor
Autor

Com esse código primeiro me deu este erro:

erro

Então adicionei um independent={true} no arquivo, mas continuo sem ocupar a tela inteira:

a tela não está totalmente ocupada

1