RN-Image Require中的Prop值语法

Question

我对RN相对较新，并且遇到语法问题。

我需要使用prop值来填充图像的来源。有人可以帮我提供所需的语法吗？

<Image style={AppStyles.buttonRectIcon} source={require('{this.props.buttonIcon})'} />

上面产生一个错误“无效关键字'this”，但是相同的语法在下面的字符串中可以正常工作-

<Text style={AppStyles.buttonRectText}>{this.props.buttonTxt}</Text>

prop值通过以下方式从父组件传递：

  <ButtonRect buttonTxt='Login' buttonIcon={require("../button.png")} buttonIcon='../images/icons/ico-login.png' />

Answer 1

require的参数不能为变量。它必须是静态的。 例如require("../sample.png")

如果您打算传递本地图像，则可以发送以下内容：

<ButtonRect buttonTxt='Login' buttonIcon={require('../images/icons/ico-login.png')} />

然后在您的子组件中

<Image 
style={AppStyles.buttonRectIcon} 
source={this.props.buttonIcon} />

如果它是远程URL，则可以这样写

<Image 
style={AppStyles.buttonRectIcon} 
source={{uri: this.props.buttonIcon}}

Answer 2

尝试

<Image 
style={AppStyles.buttonRectIcon} 
source={{uri: this.props.buttonIcon}} />