首页 > 解决方案 > 如何渲染一个 uri 被划分为 react native 的图像?

问题描述

我需要你的帮助。

我想渲染一个图像,其中 uri 的一部分是静态的,另一部分是从 JSON 文件中提取的。我尝试了下面的代码:

render() {
 const pic = this.props.navigation.getParam('picture');
 const pic2 = pic.toString();  
 const pic3 = 'https://static.blablabla'+ pic2; 

return(
 <View style = {styles.container}>
          <Image source = {{uri : 'pic3' }}/>
</View>

当我直接尝试使用 https 地址<Image source = {{uri : ''https://static.blablabla/125/14.png' }}/>时,它可以工作。

标签: imagereact-nativeuri

解决方案


在您的代码中,图像的 URI 是字符串 'pic3',而不是变量 pic3 的值 您应该删除引号

render() {
  const pic = this.props.navigation.getParam('picture');
  const pic2 = pic.toString();  
  const pic3 = 'https://static.blablabla'+ pic2; 

  return(
    <View style = {styles.container}>
      <Image source = {{uri : pic3 }}/>
    </View>
  );
}

推荐阅读