React Native SvgUri图片路径传递报错及组件代码求助

错误原因 #

React Native的require()函数不支持动态拼接的字符串参数，因为Metro打包工具需要在编译阶段确定所有资源的引用路径，动态拼接的路径无法被提前解析，因此会抛出Invalid call错误。

解决方案 #

方案1：提前定义资源映射表 #

先在组件中预加载所有需要的图标资源，通过映射表匹配传入的标识来获取对应资源：

// 预定义图标资源映射
const iconMap = {
  envelope: require('../../resources/Envelope.png'),
  // 可按需添加更多图标
};

return (
  <View style={{flexDirection: 'row', height: 40, borderRadius: 8, borderWidth: 1, borderColor: '#D6D6D6', alignItems: 'center', backgroundColor: '#F5F5F5'}}>
    <SvgUri width="16" height="16" style={{paddingLeft: 10, paddingRight: 5}} source={iconMap[this.props.iconName]} />    
    <TextInput
      style={{fontSize: 14, fontFamily: 'Archivo', color: '#424242'}}
      value={this.props.value}
      multiline={false}
      placeholder={this.props.mainProps.language.email}
      placeholderTextColor="#999"
      editable={false}
    />
</View>

调用组件时传入映射表中的标识：

<View style={{paddingHorizontal: 24, paddingVertical: 24}}>
  <Text>input</Text>
  <Input value={this.state.order.customerId?.email } mainProps={this.props.mainProps} iconName={'envelope'}/>
</View>

方案2：直接传递已require的资源 #

修改组件属性，让其接收已经通过require加载好的资源对象，而非路径字符串：

return (
  <View style={{flexDirection: 'row', height: 40, borderRadius: 8, borderWidth: 1, borderColor: '#D6D6D6', alignItems: 'center', backgroundColor: '#F5F5F5'}}>
    <SvgUri width="16" height="16" style={{paddingLeft: 10, paddingRight: 5}} source={this.props.iconSource} />    
    <TextInput
      style={{fontSize: 14, fontFamily: 'Archivo', color: '#424242'}}
      value={this.props.value}
      multiline={false}
      placeholder={this.props.mainProps.language.email}
      placeholderTextColor="#999"
      editable={false}
    />
</View>

调用时直接传入预加载的资源：

<View style={{paddingHorizontal: 24, paddingVertical: 24}}>
  <Text>input</Text>
  <Input value={this.state.order.customerId?.email } mainProps={this.props.mainProps} iconSource={require('../../resources/Envelope.png')}/>
</View>

方案3：条件判断加载（适合少量图标） #

如果图标数量不多，可通过条件判断直接指定资源路径：

let iconSource;
switch(this.props.iconName) {
  case 'envelope':
    iconSource = require('../../resources/Envelope.png');
    break;
  // 可添加其他图标判断分支
  default:
    iconSource = require('../../resources/default-icon.png'); // 可选默认图标
}

return (
  <View style={{flexDirection: 'row', height: 40, borderRadius: 8, borderWidth: 1, borderColor: '#D6D6D6', alignItems: 'center', backgroundColor: '#F5F5F5'}}>
    <SvgUri width="16" height="16" style={{paddingLeft: 10, paddingRight: 5}} source={iconSource} />    
    <TextInput
      style={{fontSize: 14, fontFamily: 'Archivo', color: '#424242'}}
      value={this.props.value}
      multiline={false}
      placeholder={this.props.mainProps.language.email}
      placeholderTextColor="#999"
      editable={false}
    />
</View>

调用时传入对应标识：

<Input value={this.state.order.customerId?.email } mainProps={this.props.mainProps} iconName={'envelope'}/>

内容的提问来源于stack exchange，提问作者Stefan