Skip to main content
Simplificando a pergunta, melhorando o título e tags
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

Duvida No React Native Conteúdo renderizado por trás da StatusBar

Boa noite, eu estouEstou fazendo um curso de react native, e cheguei numa parte que não entendo. Eu sigo certinho o tutorial, e no ponto que chegueionde a tela do app deveria está dessa maneira:

inserir a descrição da imagem aqui

vê que, com o componente no topo não parece ter ultrapassadoultrapassando 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 iconeí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  (TopoTopo) 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. É da devmedia.

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

Duvida No React Native

Boa noite, eu estou fazendo um curso de react native, e cheguei numa parte que não entendo. Eu sigo certinho o tutorial, e no ponto que cheguei a tela do app deveria está dessa maneira:

inserir a descrição da imagem aqui

vê que o componente no topo não parece ter ultrapassado o limite do layout?

no meu ficou desse jeito:  inserir a descrição da imagem aqui

Dá para ver até que o icone 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. É da devmedia.

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

Conteúdo renderizado por trás da StatusBar

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?

Fonte Link
Neto
  • 38
  • 4

Duvida No React Native

Boa noite, eu estou fazendo um curso de react native, e cheguei numa parte que não entendo. Eu sigo certinho o tutorial, e no ponto que cheguei a tela do app deveria está dessa maneira:

inserir a descrição da imagem aqui

vê que o componente no topo não parece ter ultrapassado o limite do layout?

Já no meu ficou desse jeito: inserir a descrição da imagem aqui

Dá para ver até que o icone 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. É da devmedia.

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