React Native入門？先讀這個！

---

React Native是一個允許開發者使用JavaScript和React構建移動應用程式的框架。它允許開發者使用相同的程式碼庫同時構建iOS和Android平臺的應用程式，使其成為移動開發中經濟高效且有效的解決方案。

Facebook於2015年將React Native作為開源專案推出。它基於React（一個用於構建使用者介面的JavaScript庫），並允許開發者構建外觀和感覺都像原生應用的移動應用。

使用這些工具和資源來構建React Native應用

主要有兩種方法可以安裝和設定React Native專案：使用Expo CLI或React Native CLI。

Expo是一個圍繞React Native構建的工具鏈，它允許開發者輕鬆設定和執行React Native專案，而無需Xcode或Android Studio。

使用者可以按照以下步驟開始使用React Native。

使用React Native CLI安裝和設定

React Native CLI是用於構建React Native專案的命令列介面。它允許開發者建立和管理React Native專案，併為iOS和Android平臺構建、執行和測試應用程式。

步驟1 - 使用者需要Node、React Native命令列介面、JDK和Android Studio。

步驟2 - 安裝Android Studio和SDK，並配置ANDROID_HOME環境變數。

步驟3 - 如果系統中先前安裝了全域性react-native-CLI包，則需要將其刪除，因為它可能會導致意外問題。

npm uninstall -g react-native-cli @react-native-community/cli

步驟4 - 建立一個新的React Native專案

npx react-native init <projectName>

步驟5 - 導航到專案目錄

cd <projectName>

步驟6 - 如果使用者擁有物理Android裝置，可以使用它代替AVD進行開發，方法是使用USB線將其連線到電腦

步驟7 - 現在，使用者可以輸入以下命令來執行專案。

npx react-native start

使用Expo Go安裝和設定

步驟1 - 首先，使用者必須在本地計算機上下載並安裝Node Js和npm（Node Package Manager）。

步驟2 - 接下來，使用者必須安裝Expo CLI。這可以透過在終端執行以下命令來完成：

npm install -g expo-cli

步驟3 - 安裝CLI後，使用者可以透過執行以下命令來建立一個新的React Native專案：

npx create-expo-app <projectName>

步驟4 - 導航到專案目錄

cd <project-name>

步驟5 - 現在，使用者可以執行以下命令來啟動開發伺服器。

npm start

步驟6 - 現在，使用者需要在他們的iOS或Android手機上安裝Expo Go應用程式，並連線到與他們的計算機相同的無線網路。在Android上，使用Expo Go應用程式掃描終端中的二維碼即可開啟專案。

在React Native中建立一個簡單的“Hello World”專案

使用上述工具和資源，我們可以開始構建我們的第一個React Native應用程式。

透過執行以下命令建立一個新專案（HelloWorld）：

npx create-expo-app HelloWorld
cd HelloWorld

npm start

在編輯器或IDE中開啟“App.js”檔案，並將現有程式碼替換為以下程式碼：

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

const App = () => {
   return (
      <View>
         <Text>Hello World!</Text>
      </View>
   );
};

export default App;

開發伺服器已成功啟動，當用戶掃描終端中的二維碼時，他們可以看到以下輸出。

Hello World!

構建移動應用所需的React Native函式和概念

使用React Native構建高效且使用者友好的移動應用所需的核心概念和功能。

元件

React Native使用基於元件的架構，其中元件是應用程式的構建塊，可以重複使用和巢狀以建立複雜的UI。

屬性和狀態

React Native使用屬性和狀態來管理應用程式的資料和狀態。屬性用於將資料從父元件傳遞到子元件，而狀態用於管理元件的內部狀態。

鉤子

React Native鉤子允許使用者在函式元件中使用狀態和其他React功能。最常用的鉤子是useState、useEffect、useContext、useRef等。

Flexbox

React Native使用Flexbox，這是一種允許使用者靈活地定位和調整元素大小的佈局系統。

樣式表

React Native提供了一個StyleSheet API，允許使用者定義元件的樣式。

除錯

React Native提供了一個強大的除錯工具，稱為React Native Developer Tools，它允許使用者檢查元件樹、檢視元件的屬性和狀態，並即時更改程式碼。

示例 - 待辦事項應用

在下面的示例中，我們將建立一個React Native中的待辦事項列表，使用者需要首先設定一個基本專案。

這個簡單的函式元件允許使用者新增和刪除列表中的待辦事項。它使用useState鉤子來管理待辦事項輸入欄位和待辦事項列表的狀態。

列表中每個待辦事項旁邊都有一個按鈕，允許使用者將其刪除。

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

const TodoList = () => {
   const [todo, setTodo] = useState('');
   const [todos, setTodos] = useState([]);

   const addTodo = () => {
      setTodos([...todos, todo]);
      setTodo('');
   }

   const removeTodo = (index) => {
      const newTodos = [...todos];
      newTodos.splice(index, 1);
      setTodos(newTodos);
   }

   return (
      <View>
         <TextInput
            placeholder="Enter a todo"
            value={todo}
            onChangeText={text => setTodo(text)}
         />
         <Button 
            title="Add Todo"
            onPress={addTodo}
         />
         {
            todos.map((item, index) => (
               <View key={index}>
                  <Text>{item}</Text>
                  <Button
                     title="Remove"
                     onPress={() => removeTodo(index)}
                  />
               </View>
            ))
         }
      </View>
   );
}

export default TodoList;

輸出

我們學習了一些React Native的基礎知識，包括設定開發環境、建立第一個應用程式和除錯。

我們還討論了一些構建移動應用程式必不可少的React Native函式和概念，例如使用useState和useEffect鉤子、Flexbox佈局和導航。我們還建立了一個簡單的待辦事項列表和一個基本的“Hello World”應用程式。