将图像的一部分从DB渲染到屏幕-响应本机

Question

我正在使用本机创建一个具有几个屏幕的应用程序。在其中一个屏幕中，我想显示从DB获得的图像（我从DB获得20个uri图像地址，并希望一次在屏幕上随机渲染6个图像）。当用户触摸其中一幅图像时，转到带有用户按下的所有图像的转盘。用户按下的每个图像，都切换到另一个尚未显示的图像。

我尝试使用FlatList，但是它迫使我一次渲染所有图像，并且正如我所说，我想一次渲染6张图像。

有什么帮助吗？建议？

Answer 1

这里是示例App.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;