反應本機圖像選擇器無法顯示圖像

Question

我正在嘗試使用圖像選擇器並在圖像組件上顯示圖像。 這是我的代碼

const [photo, setPhoto] = useState("")

const options = {
    title: "pick an image",
    storageOptions: {
      skinBackup: true,
      path: 'images'
    }
}

const openCamera = async _ => {
await launchCamera(options,  (res) => {
  if (res.didCancel) {
    console.log("canceled")
  }
  else if (res.error) {
    console.log("err")
  }
  else if (res.customButton) {
    console.log("cstm btn")
  }
  else {
    const source =  { uri:  res.uri };
    console.log("Imagesource=" + JSON.stringify(source));
  }
})

}

這里圖像組件

<ScrollView style={styles.postContent}>
  {
    photo && (
        <Image
            source={photo}
            style={{ height: 300, width: 300 }} />
        )
  }

相機可以打開並拍照。 然后我看不到這樣的圖像源。

Imagesource={}

Answer 1

請這樣做

const [photo, setPhoto] = useState("")

const options = {
    title: "pick an image",
    storageOptions: {
      skinBackup: true,
      path: 'images'
    }
}

const openCamera = async _ => {
await launchCamera(options,  (res) => {
  if (res.didCancel) {
    console.log("canceled")
  }
  else if (res.error) {
    console.log("err")
  }
  else if (res.customButton) {
    console.log("cstm btn")
  }
  else {
    setPhoto(res?.uri)
  }
})

在這里這樣做：

<ScrollView style={styles.postContent}>
  {
    photo && (
        <Image
            source={{uri:photo}}
            style={{ height: 300, width: 300 }} />
        )
  }

希望能幫助到你