时间戳

首页 > 解决方案 > react native require() 中的动态文件名

node.js - react native require() 中的动态文件名

问题描述

我们正在开发一个应用程序，该应用程序允许用户存储带有图像的模板，并在以后提取这些模板。这是针对在 React Native 上使用 Viro 的 AR 环境。

我们正在尝试将图像动态加载到组件中，并在我们需要已设置为变量的文件路径时收到错误：

const exampleUri = '/some/uri'
render() {
  return(       
    <Viro3DObject
    source={require(exampleUri)}
    />)
}

源道具的 URI 必须是动态的，因为 URI 是从数据库中提取的。我们尝试将整个请求存储在数据库中（在 models/element.js 中）：

const Sequelize = require('sequelize');
const db = require('../db');
const Element = db.define('element', {
sourceViro3DObject: {
    type: Sequelize.STRING
  }
});

sourceViro3DObject: `require('../../assets/emoji_heart/emoji_heart.vrx')`

当我们在 React Native 类组件中调用它时：

  getObjectData = async () => {
    try {
      const {data} = await axios.get(`/api/elements/${this.props.elementId}`)
      this.setState({sourceViro3DObject: data.sourceViro3DObject})
    } catch (err) {
      console.log(err)
    }
  }

  async componentDidMount() {
    await this.getObjectData()
  }

但这只是将 state.sourceViro3DObject 设置为一个字符串：

'require('../../assets/emoji_heart/emoji_heart.vrx')'

我们尝试将文件路径直接设置为字符串状态：

state.sourceViro3DObject = '../../assets/emoji_heart/emoji_heart.vrx'

然后调用它：

require(this.state.sourceViro3DObject)

并收到以下错误：

Invalid prop `source` supplied to `Viro3DObject`

我们已经看到了将 URI 存储在对象中的建议，但这对我们不起作用，因为在从数据库中提取图像之前，我们不知道要使用什么图像。我们不能在任何地方对它们进行硬编码。

我们将不胜感激任何帮助！

标签： node.jsreactjsdatabasereact-nativeaugmented-reality

解决方案

推荐阅读