- React Native 教程
- React Native - 主页
- 核心概念
- React Native - 概述
- React Native - 环境设置
- React Native - 应用程序
- React Native - 状态
- React Native - 道具
- React Native - 样式
- React Native - Flexbox
- React Native - 列表视图
- React Native - 文本输入
- React Native - 滚动视图
- React Native - 图像
- 反应本机 - HTTP
- React Native - 按钮
- React Native - 动画
- React Native - 调试
- React Native - 路由器
- React Native - 运行 IOS
- React Native - 运行 Android
- 组件和 API
- React Native - 查看
- React Native - WebView
- React Native - 模态
- React Native - 活动指示器
- React Native - 选择器
- React Native - 状态栏
- React Native - 开关
- React Native - 文本
- React Native - 警报
- React Native - 地理定位
- React Native - 异步存储
- React Native 有用资源
- React Native - 快速指南
- React Native - 有用的资源
- React Native - 讨论
React Native - WebView
在本章中,我们将学习如何使用WebView。当您想要将网页渲染到内联移动应用程序时,可以使用它。
使用网页视图
HomeContainer将是一个容器组件。
应用程序.js
import React, { Component } from 'react' import WebViewExample from './web_view_example.js' const App = () => { return ( <WebViewExample/> ) } export default App;
让我们在src/components/home文件夹中创建一个名为WebViewExample.js的新文件。
web_view_example.js
import React, { Component } from 'react' import { View, WebView, StyleSheet } from 'react-native' const WebViewExample = () => { return ( <View style = {styles.container}> <WebView source = {{ uri: 'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }} /> </View> ) } export default WebViewExample; const styles = StyleSheet.create({ container: { height: 350, } })
上述程序将生成以下输出。