學習基礎知識

React Native 就像 React，但它使用原生組件而不是 Web 組件作為構建區塊。因此，要理解 React Native 應用程式的基本結構，您需要理解一些基本的 React 概念，例如 JSX、組件、state 和 props。如果您已經了解 React，您仍然需要學習一些 React Native 特有的東西，例如原生組件。本教程旨在面向所有受眾，無論您是否有 React 經驗。

我們開始吧。

Hello World

依照我們民族的古老傳統，我們必須先構建一個除了說 “Hello, world!” 之外什麼都不做的應用程式。這就是它

如果您感到好奇，您可以直接在網頁模擬器中玩範例程式碼。您也可以將其貼到您的 App.js 檔案中，以在您的本機機器上建立一個真實的應用程式。

這裡發生了什麼事？

首先，我們需要導入 React 才能使用 JSX，然後它將被轉換為每個平台的原生組件。
在第 2 行，我們從 react-native 導入了 Text 和 View 組件

然後我們定義了 HelloWorldApp 函數，這是一個函數式組件，其行為方式與 Web 版 React 中的方式相同。此函數返回一個具有一些樣式的 View 組件和一個 Text 作為其子組件。

Text 組件允許我們渲染文本，而 View 組件渲染一個容器。此容器應用了幾種樣式，讓我們分析一下每個樣式的作用。

我們找到的第一個樣式是 flex: 1，flex 屬性將定義您的項目如何在主軸上「填充」可用空間。由於我們只有一個容器，它將佔用父組件的所有可用空間。在這種情況下，它是唯一的組件，因此它將佔用所有可用的螢幕空間。

以下樣式是 justifyContent：「center」。這會將容器的子組件在容器主軸的中心對齊。最後，我們有 alignItems：「center」，它會將容器的子組件在容器的交叉軸中心對齊。

這裡的一些東西可能看起來不像 JavaScript。別慌張。這是未來。

首先，ES2015（也稱為 ES6）是對 JavaScript 的一系列改進，現在已成為官方標準的一部分，但並非所有瀏覽器都支援，因此在 Web 開發中通常尚未使用。React Native 隨附 ES2015 支援，因此您可以使用這些東西而無需擔心相容性。範例中的 import、export、const 和 from 都是 ES2015 功能。如果您不熟悉 ES2015，您可能會通過閱讀像本教程這樣的範例程式碼來掌握它。如果您願意，此頁面對 ES2015 功能進行了很好的概述。

此程式碼範例中另一個不尋常的東西是 <View><Text>Hello world!</Text></View>。這是 JSX - 一種在 JavaScript 中嵌入 XML 的語法。許多框架使用專門的模板語言，讓您可以在標記語言中嵌入程式碼。在 React 中，情況恰恰相反。JSX 讓您可以將標記語言寫在程式碼內部。它看起來像 Web 上的 HTML，除了您使用 React 組件而不是像 <div> 或 <span> 這樣的 Web 元素。在這種情況下，<Text> 是一個核心組件，用於顯示一些文字，而 View 就像 <div> 或 <span>。

組件

所以這段程式碼定義了 HelloWorldApp，一個新的 Component。當您建立 React Native 應用程式時，您將會建立很多新的組件。您在螢幕上看到的任何內容都是某種組件。

Props

大多數組件在建立時可以使用不同的參數進行自訂。這些建立參數稱為 props。

您自己的組件也可以使用 props。這讓您可以建立一個在應用程式中的許多不同位置使用的單一組件，並且在每個位置都具有稍微不同的屬性。在您的函數式組件中參考 props.YOUR_PROP_NAME 或在您的類別組件中參考 this.props.YOUR_PROP_NAME。這是一個範例

TypeScript
JavaScript

使用 name 作為 prop 讓我們可以自訂 Greeting 組件，因此我們可以為每個問候語重複使用該組件。此範例也在 JSX 中使用了 Greeting 組件。這樣做的能力使 React 如此酷。

這裡發生的另一個新事物是 View 組件。View 作為其他組件的容器非常有用，有助於控制樣式和佈局。

有了 props 和基本的 Text、Image 和 View 組件，您可以構建各種靜態螢幕。要了解如何隨著時間的推移更改您的應用程式，您需要了解 State。

State

與唯讀且不應修改的 props 不同，state 允許 React 組件隨著時間的推移，根據使用者操作、網路回應和任何其他事物來改變其輸出。

React 中 state 和 props 之間有什麼區別？

在 React 組件中，props 是我們從父組件傳遞到子組件的變數。同樣地，state 也是變數，不同之處在於它們不是作為參數傳遞的，而是由組件在內部初始化和管理的。

在處理 state 方面，React 和 React Native 之間有區別嗎？

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

tsx
// React Native Counter Example using Hooks!

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

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

如上所示，在 React 和 React Native 之間處理 state 沒有區別。您可以在類別和函數式組件中使用 hooks 來使用組件的 state！

在以下範例中，我們將展示使用類別的相同上述計數器範例。

Hello World​

這裡發生了什麼事？​

組件​

Props​

State​

React 中 state 和 props 之間有什麼區別？​

在處理 state 方面，React 和 React Native 之間有區別嗎？​