> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qi-ta-js-gong-ju/react/react-native.md).

# React Native

## React Native跟React的關係是？

2015 年 3 月份的時候，Facebook 開放了 React Native 的原始碼，這是一個能夠讓你利用 JavaScript 建立原生 iOS 及 Android App 的框架。

主要是讓網頁開發人員用接近寫React的方式以JavaScript撰寫，React Native再將寫下的JS轉換為原生的程式碼，對於網頁開發人員的好處當然是能以自己習慣的方式撰寫App，而且還能一次撰寫雙平台的App，大量地減少了摸索的時間。

以下為官方範例

```jsx
import React from 'react';
import {Text, View} from 'react-native';
import {Header} from './Header';
import {heading} from './Typography';

const WelcomeScreen = () => (
  <View>
    <Header title="Welcome to React Native"/>
    <Text style={heading}>Step One</Text>
    <Text>
      Edit App.js to change this screen and turn it
      into your app.
    </Text>
    <Text style={heading}>See Your Changes</Text>
    <Text>
      Press Cmd + R inside the simulator to reload
      your app’s code.
    </Text>
    <Text style={heading}>Debug</Text>
    <Text>
      Press Cmd + M or Shake your device to open the
      React Native Debug Menu.
    </Text>
    <Text style={heading}>Learn</Text>
    <Text>
      Read the docs to discover what to do next:
    </Text>
   </View>
);

```

連結:<https://reactnative.dev/>

從範例當中可以看出React Native像是Html套用React 如同 Vue.js。\
題外:特定的需求還是需要原生來處理，也就是說多少還是會碰到一些Java或是Objective-C。

## 為什麼要從React Native開始呢？

其實理由很單純，因為基礎寫法跟React是一樣的。

有人會問說那不會React可以先學React Native嗎？我的答案是可以的，兩者其實寫法相似的同時，地位是平等的。可以從React轉React Native，也可以從React Native開始再轉React（當然還是有無法共通的地方啦）。