React Native ScrollView – Introdução e Exemplo

React Native ScrollView: Primeiramente o ScrollView é um contêiner de rolagem genérico que pode hospedar vários componentes e visualizações. Todavia os itens roláveis ​​não precisam ser homogêneos e você pode rolar verticalmente e horizontalmente (configurando a horizontalpropriedade).

React Native ScrollView
React Native ScrollView

Um ScrollView que permite que a hierarquia de views colocada dentro dele seja rolada. A exibição de rolagem pode ter apenas um filho direto colocado nela. Para adicionar várias visualizações na visualização de rolagem, faça com que o filho direto adicione um grupo de visualizações.

https://developer.android.com/reference/android/widget/ScrollView

Este exemplo cria uma vertical ScrollViewcom imagens e texto misturados.

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

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Image source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png", width: 64, height: 64}} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

Portanto as ScrollViews podem ser configuradas para permitir a paginação pelas visualizações usando gestos de deslizamento usando os pagingEnabledacessórios. Passar horizontalmente entre visualizações também pode ser implementado no Android usando o componente ViewPager .

No iOS, um ScrollView com um único item pode ser usado para permitir que o usuário faça zoom no conteúdo. Configure os maximumZoomScaleminimumZoomScaleadereços e o usuário será capaz de usar pitada e expandir gestos para zoom in e out.

Sendo assim o ScrollView funciona melhor para apresentar uma pequena quantidade de itens de tamanho limitado. Todos os elementos e vistas de a ScrollView são renderizados, mesmo que não sejam mostrados atualmente na tela. Se você tiver uma lista longa de mais itens que podem caber na tela, use um FlatList

Blog: https://www.alexandrefreire.me/category/developers/

Deixe uma resposta