Question

当我尝试使用uri时，该图像不显示，并且我想避免使用本地图像，因为我不能动态使用require。

static propTypes = {
    ...ViewPropTypes,
    initialPage: PropTypes.number,
    pager: PropTypes.instanceOf(IndicatorViewPager),
    tabs: PropTypes.arrayOf(PropTypes.shape({
        text: PropTypes.string,
        iconSource: Image.propTypes.source, <-- Here is the problem
        selectedIconSource: Image.propTypes.source
    })).isRequired,
}

有没有办法让我接受uri来源？这也是我其余的代码：

let tabs = [{
    text: `${this.state.tags.toLowerCase()}`,
    iconSource: 'https://www.exmaple.com/img/cookies.png',
    selectedIconSource: require("../img/bluep.png")
}];

Answer 1

我认为您正在混合一些事情。图像源可以是require（）或uri，但是uri不仅仅是可以传递给Image的源道具的字符串。它必须是一个具有uri字符串属性的对象，如下所示：

<Image source={{uri: 'http://myimageurl.com'}}/>

第二，使用道具类型，您仅定义要在调试时使用的道具验证。这与您的图片未显示无关。如果您发送了错误的道具，则会显示黄色警告屏幕。

最后，您的问题是您只是将prop作为字符串发送，并且需要发送对象。

因此，在没有看到其余大部分代码的情况下，您应该可以更改此部分：

let tabs = [{
    text: `${this.state.tags.toLowerCase()}`,
    iconSource: {uri: 'https://www.exmaple.com/img/cookies.png'},
    selectedIconSource: require("../img/bluep.png")
}];

有没有一种方法可以使用uri代替React Native Prop类型的require？

1 个答案: