上一章React
Native实战教程请查看:React
Native视图View元素
在本章中,我们将学习如何使用WebView,它用于渲染网页到你的移动应用内联。
使用WebView
HomeContainer将是一个容器组件。
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上面的程序将生成以下输出。