使用 Expo 在 React Native 中创建 WebView 应用程序

使用 Expo 在 React Native 中创建 WebView 应用程序是一个简单的过程。以下是有关如何实现此目标的分步指南，包括安装、设置 WebView 和构建应用程序。

了解更多：- https://codexdindia.blogspot.com/2024/07/creating-webview-app-in-react-native.html

先决条件

• JavaScript 和 React 基础知识
• 您的系统上安装了 Node.js 和 npm
• 全局安装Expo CLI (npm install -g expo-cli)
• 世博帐户

第 1 步：初始化一个新的 Expo 项目

首先，使用 Expo CLI 创建一个新的 Expo 项目。

npx create-expo-app WebViewApp --template blank
cd WebViewApp

第2步：安装React Native WebView

安装react-native-webview包，它提供了WebView组件。

expo install react-native-webview

第三步：创建WebView组件

创建一个新组件来处理 WebView。打开 App.js 并将其内容替换为以下代码：

import React from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

第四步：自定义WebView

您可以进一步自定义 WebView 以添加更多功能，例如处理导航手势、显示启动屏幕或处理文件下载。

显示启动画面

要在 WebView 加载时显示启动屏幕，请安装 Expo Splash Screen 包。

expo install expo-splash-screen

然后，修改 App.js 以使用闪屏：

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Platform, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!loading) {
      SplashScreen.hideAsync();
    }
  }, [loading]);

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: 'https://www.example.com' }}
        onLoadEnd={() => setLoading(false)}
        startInLoadingState={true}
        renderLoading={() => <ActivityIndicator color='blue' size='large' />}
        style={{ marginTop: Platform.OS === 'ios' ? 20 : 0 }}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

第 5 步：构建并运行您的应用程序

要在物理设备上构建并运行您的应用程序，请使用以下命令：

expo start

使用设备上的 Expo Go 应用扫描二维码即可查看正在运行的 WebView。

额外的定制

• 导航手势：在 WebView 组件中使用 allowedBackForwardNavigationGestures={true} 启用 iOS 导航手势。
• 文件下载：使用 onFileDownload 属性处理文件下载，并使用 expo-file-system 和 expo-sharing 包来保存文件。
• 外部链接：使用expo-web-browser在系统浏览器中打开外部链接。

资源

• 世博文献【10†来源】
• React Native WebView 文档【9†来源】
• LogRocket React Native WebView 指南【8†来源】

通过执行以下步骤，您可以使用 Expo 在 React Native 中创建功能齐全的 WebView 应用程序，并具有处理各种与 Web 相关的功能和自定义的功能。

以上是使用 Expo 在 React Native 中创建 WebView 应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！