React Native跨平台開發實務：從零到一-js教程-PHP中文網

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

登入後複製

建立store、actions和reducers，然後在App.js中設定Provider：

    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；
    從「react-native」匯入{動畫、檢視、文字}；
    從“react-native-reanimated”導入{插值}；

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

      const 不透明度 = 內插(animatedValue, {
        輸入範圍: [0, 1],
        輸出範圍: [0, 1],
      });

      常量動畫樣式 = {
        不透明度，
      };

      返回 （
        



<h3>
  
  
  14.性能優化
</h3>

登入後複製