使用 .then 在 2 个屏幕之间导航答案

【问题标题】：Navigate between 2 screen using .then使用 .then 在 2 个屏幕之间导航
【发布时间】：2021-05-25 10:59:28
【问题描述】：

我正在开发一个移动应用程序，该应用程序拍摄一张照片，然后将其呈现在不同的屏幕上，我可以这样做，但问题是当我调用图像选择器拍摄图像然后将其传递到另一个屏幕时，我得到了在导航到第二个屏幕之前，我的按钮显示大约一秒钟的第一个屏幕，我该如何防止这种情况，这里是代码：

useEffect(() => { if(image) navigating() }, [image]);

const takePicture=()=>{
    ImagePicker.openCamera({
        mediaType:'photo',
        width: 300,
        height: 400,
        includeBase64:true,
        cropping: true,
      }).then(image => {
        setImage(image.path);
      });

}

这是导航功能

const navigating=()=>{
  return navigation.navigate("Result",{
    key: image,
  })
}

【问题讨论】：

标签： react-native navigation imagepicker

【解决方案1】：

您可以在 Image 上使用 useEffect 钩子，以便在设置图像时，您可以调用导航函数。

useEffect(() => { 如果（图像）导航（） }, [图片]);

【讨论】：

我试过了，但它仍然给我相同的结果，它没有直接进入第二个屏幕它仍然回到第一个屏幕然后快速到第二个

【解决方案2】：

我认为没有办法在选择图像后直接导航到第二个屏幕。您可以做的是添加一个加载器以在用户选择图像时隐藏第一个屏幕。像这样的

const [loading, setLoading] = useState(false);

const takePicture=()=>{
    setLoading(true);
    ImagePicker.openCamera({
        mediaType:'photo',
        width: 300,
        height: 400,
        includeBase64:true,
        cropping: true,
      }).then(image => {
        navigation.navigate('Result', { key: image });
        setLoading(false);
      });
}

if (loading) return <ActivityIndicator />;

return (....)

【讨论】：

【解决方案3】：

您的代码的问题是您不能在组件 jsx 中使用导航你需要改用 useEffact

【讨论】：

我尝试使用 useffect 作为第一条评论建议，但我仍然得到相同的结果
状态更新时需要在.then()中设置状态，会自动调用useEffact
是的，我正在这样做const [image, setImage]=useState(null) useEffect(() => { if(image) navigating() }, [image]); const takePicture=()=>{ ImagePicker.openCamera({ mediaType:'photo', width: 300, height: 400, includeBase64:true, cropping: true, }).then(image => { setImage(image.path); });}
不要使用.then()，而是使用onChange handler，onChange = {() => setImage(image.path)}
这听起来可能有点迟钝，但我对此很新>