HarmonyOS react-native-qrcode-svg和react-native-svg问题？

Question

代码如下：

// Root.js
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import QRCodeSVGDemo from './QRCodeSVGDemo'
import JumpPage from './JumpPage'
const Stack = createStackNavigator();
const Root = () => {
  return <NavigationContainer>
    <Stack.Navigator initialRouteName={'JumpPage'} screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen key={'JumpPage'} name={'JumpPage'} component={JumpPage} />
  <Stack.Screen key={'QRCodeSVGDemo'} name={'QRCodeSVGDemo'} component={QRCodeSVGDemo} />
  </Stack.Navigator>
  </NavigationContainer>
}
export default Root

// JumpPage.js
import React from 'react';
import {Pressable, Text, TouchableOpacity} from 'react-native';
const JumpPage = (props) => {
  return <Pressable style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} >
  <TouchableOpacity
style={{backgroundColor: '#999999', padding: 10, marginTop: 10}}
onPress={()=>{
  props.navigation.navigate('QRCodeSVGDemo')
}}>
<Text>点击这个按钮，加载QRCode</Text>
  </TouchableOpacity>
  </Pressable>
}
export default JumpPage

// QRCodeSVGDemo.js
import QRCode from 'react-native-qrcode-svg';
import {Alert} from 'react-native';
const QRCodeSVGDemo = ()=>{
    return <QRCode
        getRef={(ref)=>{
            ref?.toDataURL((data)=>{
                if (data){
                    // （完全卸载清除数据）第一次可以转化成功
                    Alert.alert('转化base64成功')
                }else {
                    // 之后都转化失败
                    Alert.alert('转化base64失败')
                }
            })
        }}
        size={200}
        value={'https://xxx'}
    />
}
export default QRCodeSVGDemo

复现步骤：

第一次点击这个按钮加载QRCode， 跳转到QRCode页面。二维码可以加载，toDataURL也能输出base64。

返回上个页面：

第二次点击这个按钮加载QRCode， 跳转到QRCode页面。二维码可以加载，toDataURL不能输出base64。

Answer 1

这是因为qrcode去调svg.todataurl(只是一个工具转换方法)时存在时序问题，如果todataurl执行时qrcode没有正常拿到网络图片资源就会失败，加一个延时就可以正常使用了，参考示例如下：

import QRCode from 'react-native-qrcode-svg';
import {Alert} from 'react-native';
const QRCodeSVGDemo = ()=>{
  return <QRCode
  getRef={(ref)=>{
    setTimeout(() => {
    ref?.toDataURL((data)=>{
    if (data){
      // （完全卸载清除数据）第一次可以转化成功
      Alert.alert('转化base64成功')
    }else {
    // 之后都转化失败
    Alert.alert('转化base64失败')
  }
})
}, 200);
}}
size={200}
value={'https://xxx'}
/>
}
export default QRCodeSVGDemo