上一章React
Native实战教程请查看：React
Native视图View元素
【React Native WebView使用 –
React Native实战教程】在本章中，我们将学习如何使用WebView，它用于渲染网页到你的移动应用内联。
使用WebViewHomeContainer将是一个容器组件。
App.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, StyleSheet} from 'react-native';
import {WebView} from 'react-native-webview';
const WebViewExample = () => {
return (
<
View style={styles.container}>
<
WebView
source={{
uri: 'https://www.baidu.com/s?wd=%E7%AE%97%E6%B3%95',
}}
/>
<
/View>
);
};
export default WebViewExample;
const styles = StyleSheet.create({
container: {
height: 350,
},
});
运行命令react-native run-android上面的程序将生成以下输出。
文章图片
推荐阅读
- React Native模态框Modal – React Native实战教程
- React Native视图View元素 – React Native实战教程
- PHP Ds PriorityQueuealloc()函数用法介绍
- HTML DOM console.trace()方法用法实例
- 算法设计（模乘逆元问题）
- 算法设计（多数元素问题）
- Python MongoDB – create_index查询用法详细示例
- 8085程序查找8位数字的平方
- PHP SplObjectStorage contains()函数用法详细介绍