反应原生分享图片网址答案

【问题标题】：react native share image url反应原生分享图片网址
【发布时间】：2021-12-30 18:31:13
【问题描述】：

有两部分代码，第一部分：带有可触摸图片列表的页面，第二部分：带有 onPress 的图片以全尺寸在新页面中打开。到现在为止，一切都很好。但是在新页面中，当我想分享图片网址时，它不起作用！！！这是我的代码的一部分：

第一部分：

const Images = [
  { url: require("../Images/dress.jpg") },
  { url: require("../Images/111.jpg") },
  { url: require("../Images/222.jpg") },
... 
]

export class Dress extends Component {
  render() {
    return (
...
<View>
            {Images.map((image, index) => (
              <TouchableOpacity
                key={index}
                onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}
              >
                <Image source={image.url}/>
              </TouchableOpacity>
            ))}
          </View>...

第二部分（以上 onPress direct to new page）

export class ShowImage extends Component {
shareMessage = async  (PhotoLink) => {
    console.log('myUrl'+PhotoLink)
    const result = await Share.share({
      title: "title goes here",
      message: ("hi"+PhotoLink),
    });
render() {
    
    return (
...
<TouchableOpacity 
   onPress={()=>this.shareMessage(this.props.route.params.url)}
>
...

当我使用本地图像时，结果是：“hi3”或“hi4”或... 当我使用 来自互联网的网络图像 时，结果是：“hi[object Object]”

不知道问题出在哪里！！请帮帮我:)

【问题讨论】：

hi ，对于这个结果 "hi[object Object]" ，首先更改为 : ` message: ("hi"+ JSON.stringify(PhotoLink)), ` 看看返回了什么
image.url 是什么？？ console.log 这个并向我们展示。
@Mohamadamin 抱歉耽搁了！这是console.log：myUrl/static/media/dress.f29a7937.jpg
您的问题是来自互联网的网络图像？是吗？
@Mohamadamin 其实我不知道！

标签： react-native url share

【解决方案1】：

像这样编辑您的第 1 部分代码：

const Images = [
  { url: "../Images/dress.jpg" },
  { url: "../Images/111.jpg" },
  { url: "../Images/222.jpg" }, 
]

export class Dress extends Component {
  render() {
    return (
      <View>
        {Images.map((image, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}>
            <Image source={require(image.url)}/>
          </TouchableOpacity>
        ))}
      </View>
    )
  }
}

第二部分是这样的：

export class ShowImage extends Component {
shareMessage = async  (PhotoLink) => {
    console.log('myUrl'+PhotoLink)
    const result = await Share.share({
      title: "title goes here",
      message: ("hi"+PhotoLink),
    });
render() {
    
    return (
...
<TouchableOpacity 
   onPress={()=>this.shareMessage(this.props.route.params.url)}
>
...

然后再试一次。当您需要图像时，它会被转换为对象。

如果你想使用网络图片 url，你可以像这样简单地编辑 Part1：

const Images = [
  { url: "https://en.wikipedia.org/wiki/File:Image_created_with_a_mobile_phone.png" },
]

export class Dress extends Component {
  render() {
    return (
      <View>
        {Images.map((image, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => this.props.navigation.navigate("ShowImage", {url:image.url})}>
            <Image source={{uri: image.url}}/>
          </TouchableOpacity>
        ))}
      </View>
    )
  }
}

【讨论】：