Question

我们正在开发一个应用程序，该应用程序将允许用户在其上存储带有图像的模板，并在以后拉出这些模板。这是针对在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

require(this.state.sourceViro3DObject)

并收到以下错误：

Invalid prop `source` supplied to `Viro3DObject`

我们已经看到了将URI存储在对象中的建议，但这对我们不起作用，因为我们不知道要使用什么图像，直到将其从数据库中拉出为止。我们无法在任何地方对其进行硬编码。

我们将对此表示感谢！

React Native require（）中的动态文件名

0 个答案: