Question

我想动态加载MyButton类中的图像。因此，我在“ MyButton”中添加了“ imgpath”标签，并在“ MyButton”类中的渲染功能中编码了以下内容。

var icon = require(this.props.imgpath);

但是，错误是由于以下原因而建立的。

“第32行的无效调用：require（this.props.imgpath）构建失败 JavaScript包。”

但是alert(this.props.imgpath)确实打印了“ imgpath”标签！

出什么问题了？我该怎么办？谢谢。

// ButtonGroup Class
export default class ButtonGroup extends Component {
    render() {
        return (
            <View style={styles.buttongroup}>
                <View style={{flex:1, flexDirection: 'row'}}>
                    <MyButton name="account" imgpath='/img/account.png' />
                    <MyButton name="friends" imgpath='/img/friends.png'/>
                    <MyButton name="lecture" imgpath='/img/lecture.png'/>
                    <MyButton name="calc" imgpath='/img/calc.png'/>
                </View>
                <View style={{flex:1, flexDirection: 'row'}}>
                    <MyButton name="message" imgpath='/img/message.png'/>
                    <MyButton name="list" imgpath='/img/list.png'/>
                    <MyButton name="help" imgpath='/img/help.png'/>
                    <MyButton name="config" imgpath='/img/config.png'/>
                </View>
            </View>
        );
    }
}

// MyButton Class
class MyButton extends Component {
    render() {
        // No.1 SUCCESS
        //var icon = require('../../img/star.png');

        //alert(this.props.imgpath);   is OK
        // No.2 but this code was FAILED
        var icon = require(this.props.imgpath);

        return (
            <View style={{flex:1, height:100, borderWidth: 0.5}}>
                <Image source={icon} style={{width: 50, height: 50}} />
                <Text>{this.props.name}</Text>
            </View>
        );
    }
}

错误消息如下...

第32行的无效调用：require（this.props.imgpath）构建失败 JavaScript包。

Answer 1

这里棘手的解决方法是将f（e.require（'../../ img / star.png'）作为道具而不是字符串。

Answer 2

尝试这样发送；

            <MyButton
                imagePath={require('yourPath')}
                onPress={()=> {}}/>

在此处设置myButton组件内

<Image 
   style={{}} 
   resizeMode={""}
   source={this.props.imagePath}/>

Answer 3

作为React Native Documentation says，需要在编译包之前先加载所有图像源。因此，在按钮组件上，您可以像这样：

class MyButton extends Component {
  render() {
    return (
      <View style={{flex:1, height:100, borderWidth: 0.5}}>
        <Image source={this.props.imgpath} style={{width: 50, height: 50}} />
          <Text>{this.props.name}</Text>
      </View>
    );
  }
}

，然后在使用<MyButton/>组件的地方可以执行以下操作：

<View style={{ flex:1, flexDirection: 'row' }}>
  <MyButton name="message" imgpath={require('/img/message.png')}/>
  <MyButton name="list" imgpath={require('/img/list.png')}/>
  <MyButton name="help" imgpath={require('/img/help.png')}/>
  <MyButton name="config" imgpath={require('/img/config.png')}/>
</View>

但是我个人会这样做：

MyButton.js

/** Import all the images you need **/
import message from '/img/message.png';
import list from '/img/list.png';
import config from '/img/config.png';

class MyButton extends Component {
  renderImage() {
     let icon = message; // default

     switch(this.props.name) {
       case 'message':
         return message;
       case 'list':
         return list;
       default:
         return config;
     }

     return <Image source={icon} style={{width: 50, height: 50}} />
  }
  render() {
    return (
      <View style={{flex:1, height:100, borderWidth: 0.5}}>
          {this.renderImage()}
          <Text>{this.props.name}</Text>
      </View>
    );
  }
}

然后您可以像这样使用它：

<MyButton name="config"/>

我可以使用React.Componet的props和“ require（）函数动态加载图像吗？

3 个答案: