專案架構介紹與開始前的準備

基於RNBoilerplate 做的修改

• 原本的index.android.js 與index.ios.js 整合至index.js

• 打包常用的library (redux / immutable)

• 開發時常用command

• yarn add some-plugin@version

  • 安裝第三方套件

• yarn start(react-native start)

  • 開啟react-native packager 負責打包成js bundle 並傳送至裝置端

• react-native link

  • 將需要設置的native module 對 native project (android/ios) 進行library 的設置與package 引用修改

• yarn run android (react-native run-android)

  • 打包android source 並安裝在裝置上，需要準備android sdk 與 build tool 才有辦法打包，開發時只有在native project 有變更時，才需要進行打包，其他時間code 的更新都是透過 yarn start 開啟的packager

• react-native log-android

  • console.log

  • console.warn 在裝置上黃色框框

常見順序：

yarn add some-third-party-native-plugin

react-native link

react-native run-android

• 開發前的準備

打開 Dev menu 中的 Hot reloading 或 Live reload ， Genymotion 使用 Menu 鍵，實體android 手機搖一搖

• Hot reloading 只更新更動後的.js ，保留畫面的state，並不會執行constructor 與 componentDidMount，所以 ，部分UI 不適用 e.g FlatList 的 renderItem

• Live Reload， 一有檔案更動直接App 重 load ，效果等同於 手動觸發reload

參考資料：

https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97/React%20Native%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7%E4%B8%8E%E5%BF%83%E5%BE%97.md

測試資料與設定Code Template

安裝prettier, eslint ，並設定之

如果是windows ，關掉.eslintrc 的linebreak 的 check

"linebreak-style":0

• BasicComponent (component.js)

• FlatList (list.js)

• High-order Component (hoc.js)

使用 https://snippet-generator.app/

Render 的錯誤範例

回傳兩個節點或以上

(錯誤範例)

• Adjacent JSX elements must be wrapped in an enclosing tag

class Example extends Component {


  render(){
    return (
      <View><Text>{'1'}</Text></View>
      <View><Text>{'2'}</Text></View>
    )
  }
}

• (正確範例)

class Example extends Component {


  render(){
    return (
      <View>
        <View><Text>{'1'}</Text></View>
        <View><Text>{'2'}</Text></View>
      </View>
    )
  }
}

在render 的結尾有;外，在其中有其他不合法字元

• Cannot add a child that doesn't have a Yoga Node to parent without a measure function

(錯誤範例)

class Example extends Component {


  render(){
    return (
      <View><Text>{'1'}</Text>;</View>
      <View><Text>{'2'}</Text></View>
    )
  }
}

ES6, ES7

Destructuring Assignment

const result = object.result

---ES6

const {result} =  object

Object Literals

function test(param){
  return {
    param: param,
  }
}

---ES6

function test(param){
  return {
    param,
  }
}

Template String

for (let i =0;i<100;i++) {
  console.warn("number of"+i+"integer")
}

--- ES6

for (let i =0;i<100;i++) {
  console.warn(`number of ${i} integer`)
}

Async & Await

fetchFile().then(result => {
   console.warn('print result', result)
})

// 如果要等待前一次的結果，在進行下一次的結果發送，會遇到callback hell 
fetchFile().then(result1 => {
   fetchFile().then(result2 => {
      fetchFile().then(result3 => {
         ...
      })
   })
})

// 可讀性高上很多
async fetchFile(){
  return fetch('url', {headers: {}})
}
const result1 = await fetchFile()
const result2 = await fetchFile()
const result3 = await fetchFile()


console.warn('print result', result)

For loop with await

// 等前一次的request 回來，再發出下一個
async fetchSequentially(){
    for (let i=0;i<100;i++) {
       await fetchFile()
    }
}

---

// 同一時間發出100 個request
fetchParallel(){
   for (let i=0;i<100;i++) {
        fetchFile()
   }
}

可參考

https://medium.com/@peterchang_82818/es6-10-features-javascript-developer-must-know-98b9782bef44