React Native 크로스 플랫폼 개발 실습: 0에서 1까지-JS 튜토리얼-php.cn

React Native 크로스 플랫폼 개발 실습: 0에서 1까지

Mary-Kate Olsen

풀어 주다： 2024-12-24 16:39:13

원래의

218명이 탐색했습니다.

React Native cross-platform development practice: from zero to one

저는 최근 React Native 크로스 플랫폼 개발을 배우고 있습니다. 첫 번째 기본 애플리케이션을 처음부터 개발하고 릴리스용으로 패키징하는 방법을 배우고 있습니다.

1. 환경 준비

Node.js 설치
React Native CLI 설치
Android 또는 iOS 개발 환경 설정(지원하려는 플랫폼에 따라 다름)

2. 새 프로젝트 생성 React Native CLI를 사용하여 새 프로젝트를 생성합니다.

npx react-native init MyProject

로그인 후 복사

3. 프로젝트 구조를 확인하세요. 새 프로젝트에는 다음과 같은 주요 파일과 디렉터리가 포함됩니다.

index.js: 애플리케이션의 진입점
App.js: 애플리케이션의 주요 구성 요소
android 및 ios 디렉토리: 각각 Android 및 iOS 플랫폼에 대한 프로젝트 구성을 포함합니다
package.json: 프로젝트 종속성 및 메타데이터

4. 애플리케이션 실행

Android의 경우:

npx react-native run-android

로그인 후 복사

iOS의 경우:

npx react-native run-ios

로그인 후 복사

5. 첫 번째 구성요소 작성

App.js를 열고 기본 콘텐츠를 교체한 후 간단한 Hello World 구성 요소를 만듭니다.

   import React from 'react';
   import { View, Text } from 'react-native';

   const App = () => {
     return (
       <View>



<h3>
  
  
  6. Add styles You can add CSS styles in App.js or in a separate styles.js file:
</h3>



<pre class="brush:php;toolbar:false">   import React from 'react';
   import { View, Text, StyleSheet } from 'react-native';

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#F5FCFF',
     },
   });

   const App = () => {
     return (
       <View>



<h3>
  
  
  7. Install third-party libraries
</h3>

<p>Suppose we want to use the react-native-vector-icons library to add icons:<br>
</p>

<pre class="brush:php;toolbar:false">   npm install react-native-vector-icons
   npx react-native link react-native-vector-icons

로그인 후 복사

8. 타사 라이브러리를 사용하여 App.js를 업데이트하여 아이콘을 가져옵니다.

   import React from 'react';
   import { View, Text } from 'react-native';
   import Icon from 'react-native-vector-icons/Ionicons';

   const App = () => {
     return (
       <View>



<h3>
  
  
  9. Run and test After each modification, rerun the application to see the changes.
</h3>

<h3>
  
  
  10. Add routing and navigation
</h3>

<p>In order to jump between pages in the application, we can use the react-navigation library. First install:<br>
</p>

<pre class="brush:php;toolbar:false">    npm install @react-navigation/native
    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

로그인 후 복사

그런 다음 탐색 구조를 만듭니다.

    import React from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import HomeScreen from './screens/HomeScreen';
    import DetailsScreen from './screens/DetailsScreen';

    const Stack = createStackNavigator();

    const App = () => {
      return (
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    };

    export default App;

로그인 후 복사

screens 디렉토리에 HomeScreen.js와 DetailsScreen.js를 생성하고 해당 구성 요소를 작성합니다.

11. 네트워크 요청 axios 라이브러리를 사용하여 HTTP 요청을 만듭니다.

    npm install axios

로그인 후 복사

구성요소에서 요청 보내기:

    import React, { useState, useEffect } from 'react';
    import axios from 'axios';

    const HomeScreen = () => {
      const [data, setData] = useState([]);

      useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/posts')
          .then(response => setData(response.data))
          .catch(error => console.error(error));
      }, []);

      return (
        // 渲染数据
      );
    };

    export default HomeScreen;

로그인 후 복사

12. 국가 관리

상태 관리에는 Redux 또는 MobX를 사용하세요. 여기서는 Redux를 예로 들어 보겠습니다.

    npm install redux react-redux
    npm install @reduxjs/toolkit

로그인 후 복사

스토어, 액션, 리듀서를 생성한 후 App.js에서 공급자를 설정하세요.

    import React from 'react';
    import { Provider } from 'react-redux';
    import store from './store';

    const App = () => {
      return (
        <Provider store={store}>
          {/* Other codes */}
        </Provider>
      );
    };

    export default App;

로그인 후 복사

13. 애니메이션 애니메이션을 구현하려면 React-Native-Reanimated 라이브러리를 사용하세요.

    npm install react-native-reanimated

로그인 후 복사

구성요소에 애니메이션 효과 추가:

 'react'에서 React를 가져옵니다.
    import { Animated, View, Text } from 'react-native';
    'react-native-reanimated'에서 import { interpolate };

    const 앱 = () => {
      const animationValue = new Animated.Value(0);

      const 불투명도 = 보간(animatedValue, {
        입력 범위: [0, 1],
        출력 범위: [0, 1],
      });

      const 애니메이션 스타일 = {
        불투명,
      };

      반품 (
        <애니메이션.보기>



<h3>
  
  
  14. 성능 최적화
</h3>

로그인 후 복사