✨
HTML 網頁設計
  • HTML 簡介
  • 1.網站三兄弟
    • 環境設定
    • HTML 基本結構
      • 文件架構
      • 元素
      • 文章-使用的元素
      • 超連結
      • Form表單
      • 嵌入第三方服務
    • Css 基本使用
      • 使用方式 Background
        • before、after
      • Box-sizing 介紹
      • Reset Css
      • CSS - 排版
        • CSS - 定位器
        • 導覽列篇
        • 置中篇 - 範例
        • 三欄式 - 範例
        • 兩欄式
      • css命名規則
    • JS 基本使用
      • 基本語法
      • 參數/arguments
      • param() 方法
      • 定時器(timer)
  • 2.css 進階使用
    • Display
    • Position
      • z-index and stacking context
      • Table
    • CSS選擇器
  • 3.其他JS工具
    • jQuery 簡介
      • $.cookie()
      • .animate
      • scrollTop
      • 使用效果
    • BootStrap
    • NODE.JS
      • 安裝 Node.js
        • SVG - 可縮放向量圖形
      • webpack
    • React
      • React Native
  • 4.曲線圖
    • Chart 前端操作
      • Datasets Style
      • Line 設定
  • 4.DataTable
    • Bootstrap Table
  • 99.其他內容
    • Webpack
    • IIS - 網際網路資訊服務
      • 環境設定
      • WEB IIS架站
Powered by GitBook
On this page
  • React Native跟React的關係是?
  • 為什麼要從React Native開始呢?

Was this helpful?

  1. 3.其他JS工具
  2. React

React Native

參考 : https://ithelp.ithome.com.tw/articles/10233278

React Native跟React的關係是?

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

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

以下為官方範例

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>
);

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

為什麼要從React Native開始呢?

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

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

PreviousReactNextChart 前端操作

Last updated 3 years ago

Was this helpful?

連結:

https://reactnative.dev/