React Native 实现简单的浏览器：兼容 Android 和 iOS 平台

在 React Native 开发过程中，react-native-webview 组件是一个非常实用的工具。它允许我们在移动应用中嵌入 web 内容，并通过 JavaScript 接口与 web 视图进行交互。本文将介绍如何使用 react-native-webview 实现一个基本的浏览器，支持地址访问、前进、后退和刷新功能。

知识点

React Native WebView 组件的安装与使用

使用 react-native-webview 开发 web 内容展示功能是 React Native 应用开发中常见的需求。

安装命令：

yarn add react-native-webview

或者通过 npm：

npm install --save react-native-webview

简单的布局与更多布局知识

在 React Native 开发中，布局是应用的核心部分。

通过 flexbox 布局，可以轻松实现多种布局方式。

进一步学习 flexDirection、justifyContent 和 alignItems 等属性，掌握复杂布局的实现。

功能展示

本文将展示一个简单的浏览器界面，包含以下功能：

地址栏输入

前进、后退和刷新按钮

web 内容展示

安装 React Native WebView

在开始开发之前，确保已安装 react-native-webview 组件。通过以下命令安装：

yarn add react-native-webview

或者使用 npm：

npm install --save react-native-webview

具体实现代码

import React, { useState } from 'react';
import { 
  SafeAreaView, 
  StyleSheet, 
  Text, 
  View, 
  Button, 
  TextInput 
} from 'react-native';
import WebView from 'react-native-webview';
const App = () => {
  const [url, setUrl] = useState('http://www.baidu.com');
  const [webView, setWebView] = useState(null);
  const [urlInput, setUrlInput] = useState(url);
  const webViewOnLoad = (syntheticEvent) => {
    const { nativeEvent } = syntheticEvent;
    const curl = nativeEvent.url;
    const jmurl = decodeURIComponent(curl);
    setUrlInput(jmurl);
    console.log('网页加载完成，地址是：', jmurl);
  };
  const onMessage = (event) => {
    const rep = event.nativeEvent.data;
    console.log(rep);
  };
  return (
    
   
      
    
        
     
       setUrlInput(text)}
          value={urlInput}
        />