Image组件的存放地址require参数如何剥离出去?一个state也无法引用另一个state吧?



  • 0_1470790335667_image.jpg
    现在只能上面这样,如果我按下面这样写,系统会说='./../../resource/pic/0_1.png'找不到!
    var path='./../../resource/pic/0_1.png';
    <Image source={require( path)}></Image>;
    如果我先把path当一个state怎么办,难道得
    this.setState({
    onImange: <Image source={require( './../../resource/pic/1.png')}></Image>;
    })
    太麻烦了,而且我的地址参数后期是拼装起来的,
    如果能把path剥离出来,那我state只需要管理path
    this.setState({
    path: 。。。;
    })
    如果剥离不出来,一个state好像无法引用另一个state吧,下面这样state应用state我以前试过我想不行
    this.setState({
    path: ‘。。。’;
    onImange: <Image source={require( './../../resource/pic/‘ +path+ ’1.png')}></Image>;
    })



  • Image的require参数是打包生成bundle文件时就执行的,因此参数需要是常量字符串。
    之前我也遇到过这个坑,如果需要后期动态的显示图片的话,我的做法是用一个集合将所有会用到的图片包含进来,例如:

    const allImages = {
      pic1: require( './../../resource/pic/1.png'),
      pic2: require( './../../resource/pic/2.png'),
      pic3: require( './../../resource/pic/2.png'),
    };
    

    然后在需要的地方引用:

    <Image source={allImages[path]} />
    


  • allImages是个json,应该是allImages.path吧



  • @wosuopu 你的写法没问题


登录后回复