rn登录后得到的token需要传递给网页,js获取到的浏览器信息需要传递给rn
RN Index.js:
import React from 'react'
import { WebView } from 'react-native-webview'
import useList from './useList'
export default function Index(props) {
const { uri, jsCode, webViewRef, handleMessage, handleLoad } = useList(props)
return (
handleMessage(value)}
onLoad={() => handleLoad()}
/>
>
)
}
RN useList.js:
import { useState, useEffect, useRef } from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage'
import Constants from 'expo-constants'
export default function useList() {
let uri =
Constants.manifest.extra.REACT_APP_MODE === 'dev'
? `${Constants.manifest.extra.devHost}:3000/#/single/demo/test1`
: 'https://chat.xutongbao.top/#/ai/chat'
const webViewRef = useRef(null)
const jsCode = `
window.reactNative = {};
window.reactNative.testData = 'inject data:1';
true; // note: this is required, or you'll sometimes get silent failures
`
const handleLoad = async () => {
console.log('load')
}
const handleMessage = (value) => {
let payload = value.nativeEvent?.data
? JSON.parse(value.nativeEvent.data)
: {}
let type = payload.type
if (type === 'getToken') {
let fun = async () => {
const token = await AsyncStorage.getItem('token')
w服务器托管网ebViewRef.current.postMessage(
JSON.stringify({
type,
token: token,
})
)
}
fun()
webViewRef.current.postMessage(
JSON.stringify({
type: 'getBrowserInfo',
})
)
} else if (type === 'getBrowserInfo') {
console.log(payload)
服务器托管网 }
}
useEffect(() => {
// eslint-disable-next-line
}, [])
return {
uri,
jsCode,
webViewRef,
handleMessage,
handleLoad,
}
}
网页 Index.js:
import React, { useState, useEffect } from 'react'
import uaParser from 'ua-parser-js'
import './index.css'
export default function Index() {
const [testData, setTestData] = useState()
const [token, setToken] = useState()
const handleGetDataFromInjected = () => {
if (window.reactNative?.testData) {
setTestData(window.reactNative?.testData)
setToken(window.reactNative?.token)
}
}
const handleGetToken = () => {
window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'getToken' }))
}
const handleMessage = () => {
window.document.addEventListener('message', function (e) {
let payload = e.data ? JSON.parse(e.data) : {}
let type = payload.type
if (type === 'getToken') {
setToken(payload.token)
} else if (type === 'getBrowserInfo') {
let ua = uaParser(navigator.userAgent)
const { browser } = ua
window.ReactNativeWebView.postMessage(JSON.stringify({ type, browser }))
}
})
}
useEffect(() => {
handleGetDataFromInjected()
}, [])
useEffect(() => {
handleGetToken()
}, [])
useEffect(() => {
handleMessage()
}, [])
return (
{testData}
token:{token}
)
}
参考链接:
https://github.com/react-native-webview/react-native-webview/blob/eb2ce07e728352abe8b11d10a9de2a4fdc2f228b/docs/Guide.md#communicating-between-js-and-native
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: R语言如何做马尔可夫转换模型markov switching model|附代码数据
全文链接:http://tecdat.cn/?p=6962 最近我们被客户要求撰写关于马尔可夫转换模型的研究报告,包括一些图形和统计输出。假设 有时间序列数据,如下所示。经验表明,目标变量y似乎与解释变量x有关。然而,乍一看,y在水平中间波动,所以它似乎并不总…