Question

我遇到了一个愚蠢的问题，我不知道如何解决。

我有一个带相机的屏幕，可以拍照并返回上一个屏幕的路径。在此屏幕中，我想显示拍摄的照片。我有通往照片的路径。

所以显示图像的标准方法是<Image style={styles.img} source={require('../path/img.png')} />

这是我尝试做的事情：

</View>
{this.state.photoFile ? (
    <Image style={styles.img} source={require(this.state.photoFile)} />
) : null}
</View>

我收到一个错误Invalid call at line #

我试图通过

解决它

this.state = { photoFile: '../../resources/logo.png' }

...

<Image style={styles.img} source={require(this.state.photoFile)} />

let img = require('../../resources/logo.png')
if (this.state.photoFile) {
    img = require(this.state.photoFile)
}

甚至

let path = '../../resources/logo.png'
if (this.state.photoFile) path = this.state.photoFile
let img = require(path)

但是没有一个起作用。

我该如何解决？谢谢。

Answer 1

在React native中，需要在编译包之前先加载所有图像源，因此无法在require中从动态路径渲染图像。

您可以使用base64显示图像。相机还提供base64图像。

如果要为将由switch语句完成的预生成图像创建动态路径

例如

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "car":
        return require('./car.png');
      case "bike":
        return require('./bike.png');
      case "bus":
        return require('./bus.png');
      default:
        return require('./defualt.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

使用React Native显示文件夹中的图像

1 个答案: