5

我的项目中有这组图像。

this.state.destinations = [{
    "destinationId": "001",
    "img": "../../assets/img/destinations/001.png"
  },
  {
    "destinationId": "002",
    "img": "../../assets/img/destinations/002.png"
  },
  {
    "destinationId": "003",
    "img": "../../assets/img/destinations/003.png"
  }]
}

我试图在 Image 组件的 View 中重复它们中的每一个,如下所示:

render() {

    var {navigate} = this.props.navigation;

    return (
        <LinearGradient 
          colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={{flex:1}}>
            <ScrollView>
              {
                <View style={{paddingTop: 24}}>
                  {
                    this.state.destinations.map(dest => {
                      return <Image style={{height: 200, width: 600}} key={dest.destinationId} source={require(dest.img)} resizeMode="contain" />
                    })
                  }
                </View>
              }
            </ScrollView>
        </LinearGradient>
    );
  }

但是在尝试运行时,我的手机出现了一些疯狂的错误:

错误

我试图在 expo 中运行应用程序,我只是在 react-native 模式下开发它,而不是 react-native-init 模式。

4

2 回答 2

8

尝试通过以下方式重构代码,将 require 的使用直接移至定义数据的位置,以便正确评估静态资源路径:

this.state.destinations = [{
    "destinationId": "001",
    "img": require("../../assets/img/destinations/001.png")
  },
  {
    "destinationId": "002",
    "img": require("../../assets/img/destinations/002.png")
  },
  {
    "destinationId": "003",
    "img": require("../../assets/img/destinations/003.png")
  }]
}

然后像这样更新您的渲染方式<Image />,删除调用require()并直接引用dest.img

this.state.destinations.map(dest => {
  return <Image source={dest.img}
           key={dest.destinationId}
           style={{height: 200, width: 600}} 
           resizeMode='contain' />
})

希望这可以帮助!

于 2018-08-20T20:57:16.893 回答
2

动态图片导入:

"img": require("../../assets/img/destinations/001.png")
<Image source={dest.img} />

世博链接:代码

于 2018-08-20T21:00:50.027 回答