React Native のクロスプラットフォーム開発実践: ゼロから 1 へ-jsチュートリアル-php.cn

React Native のクロスプラットフォーム開発実践: ゼロから 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 { アニメーション、ビュー、テキスト } from 'react-native';
    import { interpolate } から 'react-native-reanimated';

    const App = () => {
      const animeValue = new Animated.Value(0);

      const opacity = interpolate(animatedValue, {
        inputRange: [0, 1],
        出力範囲: [0, 1],
      });

      const animeStyle = {
        不透明度、
      };

      戻る （
        



<h3>
  
  
  14. パフォーマンスの最適化
</h3>

ログイン後にコピー