解决 React Native 中“source.uri 不应该是空字符串”的问题

Question

我无法解决问题

source.uri 不应为空字符串

在 React Native 中。

我不明白这个错误从何而来。我的组件中有 3 个 Flatlist，它们使用 parent 中的 props 作为 URI 来渲染 children 组件，并且这些都不是空的。

这是 uri 部分：

<Image style={styles.imageStyle} source={{uri: this.props.url }} />

Answer 1

这是另一种解决方案：

<Image style={styles.imageStyle} source={this.props.url ? {uri: this.props.url } : null} />

Answer 2

很可能向 uri 传递了一个空字符串。如果您像我一样故意将 uri 设置为空字符串，以便不显示此数据的任何图像，请使用 undefined 代替或像这样使用它：

<Image style={styles.imageStyle} source={{uri: this.props.url !=="" ? this.props.url : undefined }} />

Answer 3

好吧，我设法通过添加默认的 INITIAL_STATE 变量来解决这个问题，该变量在执行操作之前设置我的应用程序的状态和默认值。

因此添加下面的网址即可解决！但可以是空值以外的任何 url。

profile: { user: { phone: '', email: '', first_name: '', last_name: '', photo: 'http://www.tiptoncommunications.com/components/com_easyblog/themes/wireframe/images/placeholder-image.png', description: '' }, membership: { active: false } }

Answer 4

其他方式，可以实现：

render() {
     const {imageURL} = this.state;
     <Image source={{uri:imageURL ? imageURL : null}} style={styles.tinyLogo}/>
}

Answer 5

<Image style={styles.imageStyle} source={this.props.url ? {uri: this.props.url } : {}} />

ts 不支持 null 或 undefined。