0

Estou fazendo um curso onde a tela do app deveria está dessa maneira, com o componente no topo não ultrapassando o limite do layout:

inserir a descrição da imagem aqui

Porém no meu código ficou desse jeito:

inserir a descrição da imagem aqui

Dá para ver até que o ícone foi cortado.

Segue o codigo do App.js, que está igual o do curso.

import React from 'react';
import { View } from 'react-native';

import Topo from './componentes/Topo';
import Texto from './componentes/Texto';
import Cards from './componentes/Cards';

export default function App () { 
return (
  <View>
    <Topo />
    <Texto />
    <Cards />
  </View>
);
}

O código do componente (Topo) index.js:

import React from 'react';
import { View, Text, Image } from 'react-native';
import estilo from './estilo'
import churrasco from '../../assets/churrasco.png';

export default function Topo() {
  return (
    <View style={estilo.box}>
      <Image style={estilo.boxIcone} source = { churrasco } />

      <View>
        <Text style={estilo.boxTitulo}>Churrasco em casa</Text>
        <Text style={estilo.boxSubtitulo}>Calculando a comida e a bebida</Text>
      </View>
    </View>
  )
}

Eu acho que talvez possa ser a versão, já que esse curso deve ter um pouquinho de tempo.

Vocês podem me esclarecer por que isso acontece? E qual a solução?

1
  • Alguma resposta te ajudou? Dê uma olhada no tour e saiba como aceitar uma resposta. Commented 5/12/2020 às 19:09

3 Respostas 3

1

No começo de um curso sobre React Native, tive um problema parecido, mesmo seguindo o tutorial a parte de cima ficava cortando, no começo coloquei apenas um marginTop: 20, então percebi que o problema é o StatusBar, acho que em versões anteriores ele já vinha automático, agora você tem que chamar-lo.

Você pode colocar uma marginTop na view:

<View style={estilo.box, {marginTop: 20}}>
      <Image style={estilo.boxIcone} source = { churrasco } />
  <View>
    <Text style={estilo.boxTitulo}>Churrasco em casa</Text>
    <Text style={estilo.boxSubtitulo}>Calculando a comida e a bebida</Text>
  </View>
</View>

OU

Você pode colocar a StatusBar no App.js, aconselho fazer isso: (Lembrar de colocar (<> </>) no inicio e no fim do return)

import React, { useState } from "react";
import { StatusBar } from "react-native";
import Routes from "./src/routes/routes";

export default function App({ navigation }) {
  return (
    <>
      <StatusBar barStyle="light-content" backgroundColor="#3e91e4" />
      <Routes />
    </>
  );
}
1
  • Era o statusbar mesmo, ele realmente não vem automatico como em versões passadas.
    – Neto
    Commented 11/12/2020 às 14:41
0

Opa, boa noite. pelo que pude compreender sua dúvida é em relação a ao cabeçalho que corta o seu component, certo? Você pode ocultar o mesmo, mas vale ressaltar que a implementação depende da versão do stack navigator que está usando.

A partir da versão 5 você pode fazer o seguinte:

<Stack.Navigator
 screenOptions={{
   headerShown: false 
  }}>
 <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator> 

Caso fique com dúvida só mandar, que tentarei explicar melhor pra você.

0

O problema é que sua tela não está considerando o tamanho da StatusBar.

Por exemplo, quando a StatusBar está com a propriedade translucent definida o aplicativo será renderizado por trás dela, o que pode ser útil em algumas situações, mas é um problema no seu caso.

Para resolver você pode renderizar a <StatusBar /> no componente que lhe convém, porém sem definir a propriedade translucent. Vale ressaltar que mesmo que você renderize a <StatusBar /> em vários componentes, o React Native considerará a última renderizada.

<StatusBar backgroundColor='#fff' barStyle='dark-content' />

Caso esteja utilizando o Expo, utilize o expo-status-bar.

Outra opção é fazer uso da SafeAreaView como root do seu componente ao invés de uma View. O funcionamento é o mesmo da View, porém a SafeAreaView leva em consideração alguns detalhes (como a StatusBar, barras de navegação, tab etc.) e adiciona um padding:

<SafeAreaView>
  {/* componentes */}
</SafeAreaView>

Também existe o react-native-safe-area-context. Caso esteja utilizando o Expo, veja aqui

Note que é preferível utilizar SafeAreaView ao invés de você colocar um estilo manual pois o tamanho da tela disponível varia de acordo com o dispositivo e também OS (Android / iOS).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .