рендеринг части изображений на экран из БД - реагировать родной

Question

Я создаю приложение на реагировать нативно, у которого есть несколько экранов. на одном из экранов я хотел бы показать изображения, которые я получаю из БД (я получаю из БД 20 адресов изображений и хочу рендерить случайным образом 6 на экране одновременно). когда пользователь касается одного из изображений, он переходит к карусели, на которой есть все изображения, которые нажимает пользователь. каждое изображение, которое пользователь нажал, переключается на другое изображение, которое еще не было показано.

Я пытался использовать FlatList, но это заставило меня сделать все изображения один раз, и, как я уже сказал, я хочу сделать 6 за раз.

любая помощь? предложения?

Answer 1

Вот пример приложения. js

import React from "react";
import {
  Image,
  StatusBar,
  ScrollView,
  SafeAreaView,
  TouchableOpacity
} from "react-native";

const staticData = [
  {
    id: 1,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  },
  {
    id: 2,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  },
  {
    id: 3,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  },
  {
    id: 4,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  },
  {
    id: 5,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  },
  {
    id: 6,
    title: "test",
    uri:
      "https://images.unsplash.com/photo-1586687803268-e400f13af4db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"
  }
];

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          horizontal
          contentInsetAdjustmentBehavior="automatic"
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          {staticData.map(item => {
            const { id, title, uri } = item;
            return (
              <TouchableOpacity
                onPress={() => {
                  // Magic logic here
                  // Selected one's data is 'item'
                }}
              >
                <Image style={{ height: 150, width: 150 }} source={{uri: uri}} />
              </TouchableOpacity>
            );
          })}
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;