探索React Native WebView Android：一款跨平台的Web视图组件

import React, { PureComponent } from 'react';
import { WebView as RNWebView, View, Text, StyleSheet, Platform } from 'react-native';
 
// 一个简单的Web视图组件，用于加载网页
export default class WebView extends PureComponent {
  render() {
    const { source, style, ...props } = this.props;
 
    // 如果是Android平台，使用RNWebView；否则，使用Web组件
    if (Platform.OS === 'android') {
      return (
        <RNWebView
          source={source}
          style={[styles.webView, style]}
          {...props}
        />
      );
    } else {
      // iOS平台使用iframe加载网页
      return (
        <View style={[styles.webView, style]}>
          <iframe
            src={source.uri}
            style={styles.iframe}
            {...props}
          />
        </View>
      );
    }
  }
}
 
const styles = StyleSheet.create({
  webView: {
    flex: 1,
  },
  iframe: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
});

这个代码示例展示了如何在React Native应用中创建一个跨平台的Web视图组件。它使用了平台检测，在Android上使用了RNWebView，而在其他平台上使用了HTML的<iframe>标签。这样，无论是在Android还是iOS设备上，用户都能看到相似的Web内容展示效果。