将 .js 数据库作为 props 传递给 React Native 组件

Question

我的应用程序上当前显示图像幻灯片。我首先在

images.js

文件中初始化图像。

export default [
  {
    id: 1,
    img: require("../AS_images/1.webp"),
  },

然后我将此文件作为依赖项导入到我的组件中

Slider.js

import Images from "../assets/AS_images/images";

然后我用它来渲染一个平面列表并在不同的组件中处理其余部分

  return (
    <View>
      <FlatList
        data={Images}
        renderItem={({ item }) => <SlideItem item={item} />}
     etc..

然后通过调用主组件

将其显示在

App.js

中

<SafeAreaView>
    <Slider />
  </SafeAreaView>

效果很好，但我需要显示 8 组图像幻灯片，而且我真的不想为每个人再创建 7 个 Slider.js 文件。我宁愿传递一个道具来告诉组件要使用哪组图像。例如：

<SafeAreaView>
<Slider path="Set2"/>
</SafeAreaView>

在 Slider.js 文件中，收到此道具后，它将相应地调整路由：

import Images from "../assets/Set2/images";

路径中唯一需要更改的部分是“Set2”位。我计划将所有图像捆绑在 /assets/ 下各自单独的文件夹中，然后在各自的文件夹中使用此数据库来初始化它们 /assets/Set2/images.js

我将如何去做或做类似的事情？预先感谢您的帮助。

我尝试修改导入路径和位置，但这显然不起作用

当前代码 应用程序.js

  <SafeAreaView>
        <Slider path="AS" />
      </SafeAreaView>

滑块.js

import AS from "../assets/AS_images/images";

...

return (
    <View>
      <FlatList
        data={props.path}
        renderItem={({ item }) => <SlideItem item={item} />}
        horizontal
        pagingEnabled
        snapToAlignment="center"
        showsHorizontalScrollIndicator={false}
        onScroll={handleOnScroll}
        onViewableItemsChanged={handleOnViewableItemsChanged}
        viewabilityConfig={viewabilityConfig}
      />
      <Pagination data={props.path} scrollX={scrollX} index={index} />
    </View>
  );

Answer 1

您正在传递

data="AS"

，而不是 AS 文件，这应该可以工作

import AS from "../assets/AS_images/images";
import BS from "../assets/BS_images/images";
const Slider = (props) => {
    return (
    <View>
      <FlatList
        data={props.path == "AS" ? AS : BS }
        renderItem={({ item }) => <SlideItem item={item} />}
        horizontal
        pagingEnabled
        snapToAlignment="center"
        showsHorizontalScrollIndicator={false}
        onScroll={handleOnScroll}
        onViewableItemsChanged={handleOnViewableItemsChanged}
        viewabilityConfig={viewabilityConfig}
      />
      <Pagination data={props.path} scrollX={scrollX} index={index} />
    </View>
  );
}

`