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 CLI를 사용하여 새로운 Expo 프로젝트를 생성합니다.

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

2단계: React Native WebView 설치

WebView 구성요소를 제공하는 React-native-webview 패키지를 설치하세요.

expo install react-native-webview

3단계: 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;

4단계: WebView 사용자 정의

탐색 제스처 처리, 스플래시 화면 표시, 파일 다운로드 처리 등 더 많은 기능을 추가하기 위해 WebView를 추가로 사용자 정의할 수 있습니다.

스플래시 화면 표시

WebView가 로드되는 동안 스플래시 화면을 표시하려면 Expo 스플래시 화면 패키지를 설치하세요.

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 앱으로 QR 코드를 스캔하여 WebView가 실제로 작동하는 모습을 확인하세요.

추가 사용자 정의

• 탐색 제스처: WebView 구성 요소에서 allowedBackForwardNavigationGestures={true}를 사용하여 iOS 탐색 제스처를 활성화합니다.
• 파일 다운로드: onFileDownload 속성으로 파일 다운로드를 처리하고 파일 저장을 위해 expo-file-system 및 expo-sharing 패키지를 사용합니다.
• 외부 링크: expo-web-browser를 사용하여 시스템 브라우저에서 외부 링크를 엽니다.

자원

• 엑스포 문서【10†출처】
• React Native WebView 문서【9†출처】
• React Native WebView에 대한 LogRocket 가이드【8†source】

이 단계를 따르면 Expo를 사용하여 React Native에서 다양한 웹 관련 기능과 사용자 정의를 처리할 수 있는 기능을 갖춘 완전한 기능의 WebView 앱을 만들 수 있습니다.

위 내용은 Expo를 사용하여 React Native에서 WebView 앱 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!