react如何使用webview
在React中使用WebView
React中可以通过第三方库或原生组件实现WebView功能，以下是两种常见方法：
使用react-native-webview（React Native环境）
安装库：
npm install react-native-webview基础用法示例：
import React from 'react';
import {WebView} from 'react-native-webview';
const App = () => {
return (
<WebView
source={{uri: 'https://example.com'}}
style={{flex: 1}}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
);
};使用iframe（Web环境）
对于React网页应用，可以直接使用HTML的iframe标签：
function WebViewComponent() {
return (
<iframe
src="https://example.com"
width="100%"
height="500px"
title="WebView"
/>
);
}常用功能实现
控制导航：
<WebView
source={{uri: 'https://example.com'}}
onNavigationStateChange={navState => {
// 处理导航变化
}}
/>注入JavaScript：
<WebView
source={{uri: 'https://example.com'}}
injectedJavaScript={`alert('Hello');`}
/>处理通信：
<WebView
source={{uri: 'https://example.com'}}
onMessage={event => {
const message = event.nativeEvent.data;
// 处理来自WebView的消息
}}
/>注意事项
- React Native WebView需要原生依赖，可能需要执行
pod install（iOS）或重新构建项目 - 网页端iframe受同源策略限制
- 安卓平台需要添加网络权限
- 考虑使用
originWhitelist属性限制可加载的域名
性能优化
对于复杂网页：
<WebView
source={{uri: 'https://example.com'}}
startInLoadingState={true}
renderLoading={() => <ActivityIndicator />}
cacheEnabled={true}
/>
