react-native webview组件

kongxx

发布于 2024-06-15 10:39:06

650

发布于 2024-06-15 10:39:06

文章被收录于专栏：有困难要上，没有困难创造困难也要上！有困难要上，没有困难创造困难也要上！

创建工程

$ npx react-native init MyReactNativeApp

安装WebView组件

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

$ cd ios
$ npx pod-install ios

使用WebView

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

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 组件的使用：

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