在 react-native 中加载图像作为道具答案

【问题标题】：load image as prop in react-native在 react-native 中加载图像作为道具
【发布时间】：2020-04-12 07:19:51
【问题描述】：

所以我有一个 customHeader 组件，我想像这样将图像加载到其中

<Image source={props.logoImg} style={styles.icon} />

在页面上我会像这样传递道具

<CustomHeader 
     navigation={props.navigation} //call props.navigation in component
     primaryColor={primaryColor}
     coName={coName}
     logoImg={require('../content/...some image...'}
 />

这样它不会抛出错误，但不会加载。我知道这与将其作为道具传递有关，因为我可以将图像直接加载到屏幕中。我只是不确定我做错了什么或我在这里缺少什么。

我曾尝试在组件内部使用 require，但这会在编译时引发错误，因为 react-native 需要在编译时“需要”图像。

【问题讨论】：

标签： javascript image react-native

【解决方案1】：

这应该可以工作

在 Wrapping 组件中

<CustomHeader 

     imageUri={'../content/...some image...'}
 />

然后在内部组件中


<Image source={require(props.imageUri)} />

【讨论】：

引发 javascript 构建错误 components\CustomHeader.js: components\CustomHeader.js:Invalid call at line 15: require(props.imageUri)
所以似乎只在组件中使用图像不起作用？我正在尝试 <Image source={require(...some img...)} /> 直接进入组件，它不会引发任何错误，但不会加载。但是，如果我在页面上使用它，则同一行也有效。
对我来说它的工作snack.expo.io/@yoel301/icon-in-child
刚刚发现 react-native 图片需要高度样式。我有点傻，但我觉得它不应该需要那个。