React Native中通过route.params传递base64图片参数为undefined如何解决

• 传参格式错误：React Navigation的navigate方法仅接收两个参数，第一个是目标路由名称，第二个是要传递的参数对象。你当前的写法navigate('Save', saveImage(), {result})把参数对象放在了第三个位置，框架不会识别该参数，自然无法在第二个页面获取到result。
• 异步逻辑执行顺序错误：saveImage是异步函数，直接在navigate中调用时，不会等待截图生成base64的逻辑执行完成就会触发跳转，此时result还未被赋值。
• state更新异步问题：setResult是React的异步状态更新方法，调用后不会立刻修改result变量的值，就算等待saveImage执行完成后立刻读取result，拿到的还是更新前的旧值。

调整逻辑为：先触发截图生成base64的逻辑，等待生成完成后直接使用返回的base64值进行跳转传参，不需要依赖state中转，修改后的代码如下：

// 保留原有saveImage方法的话，新增返回值
const saveImage = async () => {
  const image = await captureRef(inputEl, {
      result: 'base64',
      quality: 1,
      format: 'png',
    });
    setResult(image);
    // 新增返回生成的base64结果
    return image;
};

// 新增跳转触发方法，等待base64生成后再跳转
const handleNavigateToSave = async () => {
  const imageBase64 = await saveImage();
  // 参数放在navigate的第二个位置
  props.navigation.navigate('Save', { result: imageBase64 });
};

// 替换原有onPress绑定
onPress={handleNavigateToSave}

第二个页面的渲染逻辑可以增加空值判断避免报错：

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

内容的提问来源于stack exchange，提问作者Alexander