Question

我的功能是：

  getImage(page){
    return
    (
      <Image
      style={{position:'absolute',height:'60%',width:'90%',padding:50,bottom:30 ,alignSelf: 'center' }}
      source={require('../../images/backgrounds/introduction/'+page.img)}
        />
    )
  }

render(){
return (
...
{this.getImage(activePage)}
)
}

但我收到此错误消息：

Error: /Users/***/components/login/Introduction.js:85:14: calls to `require` expect exactly 1 string literal argument, but this was found: `require('../../images/backgrounds/introduction/' + page.img)`.

Answer 1

您可以使用require()来代替state中的串联。

初始化一个州，例如imageArray={page1:require('link of page 1 image'),page2:require('link of page 2 image')}

然后在getImage()中像这样使用Image，

<Image
  style={{position:'absolute',height:'60%',width:'90%',padding:50,bottom:30 ,alignSelf: 'center' }}
  source={this.state.imageArray[page]}
    />

其中page是imageArray状态之一的键。

如何使用状态制作动态图像-反应本机

1 个答案: