使用 .then 在两个屏幕之间导航

Question

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

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,
  })
}

Answer 1

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

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

Answer 2

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

Answer 3

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

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 (....)

使用 .then 在两个屏幕之间导航

Navigate between 2 screen using .then

navigation

react-native

imagepicker