使用 route.params React native 传递图像

Question

我尝试用 route.params 传递图像，但它不起作用。

从第一个屏幕我传递的结果是这样的：

onPress={() => props.navigation.navigate('Save', saveImage(), {result} )}

我的第二个屏幕我尝试显示我的图像我是这样的：

 <Image style={styles.image} source={{ uri: `data:image/png;base64,${props.route.params.result}` }}/>

我通过 printscreen a View 得到我的结果，如果我 console.log 我的图像在屏幕 One 上我得到我的结果，但是如果 console.log 在屏幕编号上它说“未定义”。

这是我保存图像的方式和这项工作：

  const saveImage = async () => {
  const image = await captureRef(inputEl, {
      result: 'base64',
      quality: 1,
      format: 'png',
    });
    setResult(image);
  };

Answer 1

我建议您使用以下代码：

    const saveImage = async () => {
       var  image = null
       image = await captureRef(inputEl, {
             result: 'base64',
             quality: 1,
             format: 'png',
       });
   if(image) return image ;
  };

 const goSaveImage = () => {
    saveImage().then((image)=>{
      props.navigation.navigate('Save', {result : image} )
    })
 }

在您的 onPress 上：

onPress={() => goSaveImage()}

Answer 2

您应该在 useEffect 中导航。

useEffect(() => {
  if (result) {
    props.navigation.navigate('Save', result)
  }
}, [result])

onPress={saveImage}

使用 route.params React native 传递图像

Pass image with route.params React native

navigation

react-native

routeparams