iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
4
Modern Web

我不用Expo啦,React Native!系列 第 1

[Day1] React Native是什麼?

  • 分享至 

  • xImage
  •  

自我介紹一下

首先來介紹一下參賽動機,小弟公務員做了三四年後覺得工作沒什麼樂趣,自己又突然想來學一下App,於是辭職後開始尋找相關資訊,開頭遇上了不少狀況

  • 要報名App補習班時被補習班人員打槍(說是太難我學不來?!)
  • 轉頭看網路課程學Vue
  • 開始找工作後被騙到日本黑心公司去浪費了一年(發現公司不對勁趁假日或晚上偷學React)

逃回台灣後最近才在某傳產開始第一份前端工作,現在公司的網頁是以Vue為開發工具,雖然剛開始就是學Vue所以也不是說無法應付,但後來開始碰React的我發現比較喜歡React的寫法,所以之後私底下自己寫東西是以React為開發工具,最近開始在React中加入TypeScript的我突然遇上了鐵人賽即將開賽的訊息,想到以前有稍微看過,React Native本身的寫法與React差異不大,就有了趁這個期間開始學習撰寫App的念頭,於是便有了這個系列。


React Native跟React的關係是?

React Native是Facebook開發的框架,主要是讓網頁開發人員用接近寫React的方式以JavaScript撰寫App,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

不過React Native扮演的其實算是渡河時河中的踏腳石,有了踏腳石當然會相對容易渡河(從Web踏入原生App),然而React Native並不能解決所有的需求,所以一些特定的需求還是需要原生來處理,也就是說......多少還是會碰到一些Java或是Objective-C。


為什麼要從React Native開始呢?

其實理由很單純,因為基礎寫法跟React是一樣的,乍看之下沒什麼學習成本......(毆)

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

目前我的狀況是半年前有看過一輪教學影片,但沒實際下去寫過React Native,所以這系列的重點主要還是會擺在功能的實現(當然必要的概念還是會提一下),所以應該還是很有可能遇到無法解決的問題或是問題解決了但原理不清楚等等的情況,也請觀看的同時能對於前端或是App都是新手的我給予指教或是討論。

等整個系列完成之後再來補個大綱


[Day1] React Native是什麼?
[Day2] React Native入門可以不用Expo嗎?
[Day3] 創建專案的時間到啦
[Day4] 加入導覽列-Android:你再冷落我試試看啊?
[Day5] 在導覽列加入圖示
[Day6] 訂定資料格式-TypeScript:型別判斷
[Day7] 訂定資料格式-2
[Day8] 輪播:神奇的上下交錯
[Day9] Redux:我是大家的無人機
[Day10] 建立與細節頁面之連結
[Day11] 圖片載入緩慢
[Day12] 幫喜歡的項目按下愛心
[Day13] 在App中瀏覽網頁
[Day14] 我的最愛頁面
[Day15] 搜尋頁面
[Day16] 提醒功能-1:設定環境
[Day17] 提醒功能-2:即時通知
[Day18] 提醒功能-3:計畫通知
[Day19] 提醒功能-4:計算播放時間
[Day20] 客戶(本地)端儲存
[Day21] 資料庫設定
[Day22] 實機測試
[Day23] 提醒功能-5:被遺忘的iOS
[Day24] 語言切換-1:沒有萬能的許願機
[Day25] 語言切換-2:store架構調整
[Day26] 設定頁面-1:頁面改造
[Day27] 設定頁面-2
[Day28] 方向鎖定
[Day29] Build成App
[Day30] 初始畫面:JS版
[Day31] 初始畫面:原生版
[Day32] 提醒功能-6:最後的回馬槍


明天先來講Expo是什麼以及App的功能規劃

參考:React Native官網


下一篇
[Day2] React Native入門可以不用Expo嗎?
系列文
我不用Expo啦,React Native!33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言