React Native WebView使用 – React Native实战教程

上一章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上面的程序将生成以下输出。