前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-native webview组件

react-native webview组件

作者头像
kongxx
发布2024-06-15 10:39:06
1120
发布2024-06-15 10:39:06
举报

创建工程

代码语言: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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-06-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建工程
  • 安装WebView组件
  • 使用WebView
  • 运行
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档