react-native webview组件

创建工程

代码语言：javascript复制

$ npx react-native init MyReactNativeApp

安装WebView组件

代码语言：javascript复制

$ cd MyReactNativeApp
$ npm install react-native-webview --save

代码语言：javascript复制

$ cd ios
$ npx pod-install ios

使用WebView

创建src/mywebview.js文件，并添加以下代码：

代码语言：javascript复制

import React from 'react'
import { WebView } from 'react-native-webview';

export default function index() {
  return (
    <WebView
      source={{ uri: 'https://cn.bing.com' }}
      style={{ marginTop: 20, }}
    />
  )
}

修改 App.tsx 文件，添加 MyWebView 组件的使用：

代码语言：javascript复制

import React from 'react';
import { SafeAreaView, View, StyleSheet } from 'react-native';
import MyWebView from './src/webview/mywebview'

function App(): React.JSX.Element {

  return (
    <SafeAreaView style={styles.container}>
      <MyWebView />
    </SafeAreaView>
  )
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  }
})

export default App

运行

代码语言：javascript复制

$ npx react-native start

import native react webview app

0 人点赞