react native中基于webview的腾讯图形验证码

腾讯验证码

效果实例图

第三方库

npm i react-native-webview

react-native-webview

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

const TestWebViewCode = () => {
    const [params, setParams] = useState(null);

    const handleMessage = event => {
        const data = JSON.parse(event.nativeEvent.data);
        // 处理从WebView发送过来的消息
        console.log('[]', data);
        // 在这里可以处理JavaScript回调函数返回的值

        setParams(() => data?.randstr)
    };

    useEffect(() => {
        return () => { };
    }, []);
    return (
        <>
          
                
                        
                            
                                
                                
                                
                                
                                
                                
                                
                            
                            
                            
                        
                        `
                    }}
                    onMessage={handleMessage}
                />
            返回参数：{params}
        
    );
};
const styles = StyleSheet.create({

});

export default TestWebViewCode;