ScrollView

Continuando o estudo nos componentes, veremos nesta aula, em particular, o ScrollView, que é o componente de rolagem de tela.

Criando parágrafos

Com o arquivo "App.js" reduzido apenas com o básico, um parágrafo aleatório, coloque-o para renderizar na tela e aumente a fonte. Ao fazer isso, teremos um longo texto sendo impresso na tela do dispositivo.

Exemplo de parágrafo abaixo:

"At that moment he had a thought that he'd never imagine he'd consider. "I could just cheat," he thought, "and that would solve the problem." He tried to move on from the thought but it was persistent. It didn't want to go away and, if he was honest with himself, he didn't want it to. "

Criando barra de rolagem

Em dispositivos móveis temos de usar um componente para que seja possível rolar objetos em tela, sejam eles textos, imagens ou qualquer mídia. Para fazer isso, utilizamos o componente 'ScrollView', que engloba entre a abertura e o fechamento todos os objetos que devem permitir o scroll na tela.

Acompanhando a aula, implemente o código abaixo:

import React from 'react';
import { SafeAreaView, ScrollView, Text } from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
      <ScrollView style={{ margin: 16 }}>
        <Text style={{ fontSize: 28 }}>At that moment he had a thought that he'd never imagine he'd consider. "I could just cheat," he thought, "and that would solve the problem." He tried to move on from the thought but it was persistent. It didn't want to go away and, if he was honest with himself, he didn't want it to.</Text>
        <Text style={{ fontSize: 28 }}>At that moment he had a thought that he'd never imagine he'd consider. "I could just cheat," he thought, "and that would solve the problem." He tried to move on from the thought but it was persistent. It didn't want to go away and, if he was honest with himself, he didn't want it to.</Text>
        <Text style={{ fontSize: 28 }}>At that moment he had a thought that he'd never imagine he'd consider. "I could just cheat," he thought, "and that would solve the problem." He tried to move on from the thought but it was persistent. It didn't want to go away and, if he was honest with himself, he didn't want it to.</Text>
      </ScrollView>
    </SafeAreaView>
  );
}