React native

2020/10/14 (新增連結)

環境設定

首先，先安裝react native所需要的工具

• React Native教學 Part 1 - 詳盡新手入門

要先安裝node.js。

• 下載 node

• Mac可利用package manager(如:homebrew)安裝

• Here’s How To Update Node Js To The Latest Version

安裝後，安裝expo:

npm install -g expo-cli

解除原本安裝的版本

npm uninstall -g expo-cli

檢查版本

node -v

npm -v

expo --version

• nvm for windows (好像沒用)

• Windows 10 安裝並使用 nvm 切換 NodeJS 版本 (好像沒用)

• Visual Studio Code to use node version specified by NVM (好像沒用)

• nvm for mac/linux

要安裝特定版本，如:3.28.5

npm install -g expo-cli@3.28.5

• 在Mac OSX下，如果遇到權限的問題，請參考: Permission denied when installing npm modules in OSX

• 如果一直要求 install globally，請參考: Endless loop on installing Expo CLI

可以利用expo產生一個空白的專案 (如:test-reactnative)，在機房裡，請使用D磁碟機。

expo init test-reactnative

expo init會要求選擇樣板，可以選擇expo-template-blank，template會產生一些設定檔，以及一個App.js。跟react不一樣的是，因為react native是在手機上執行，所以，無法直接使用html元件，所以，react native提供了一些手機介面元件，以這個範例而言，使用了View及Text元件。

可以利用任何IDE(如:Visual Studio、Brackets或VS Code)來開啟這個些檔案。

執行專案

要執行這個專案的話

cd test-reactnative

npm start

就可以啟動expo的DevTools，DevTools會啟動瀏覽器http://localhost:19002/ ，讓我們可以利用安裝好的模擬器或利用expo提供的app測試我們寫好的app。

如果看到了以下的錯誤訊息，那就是你忘了先進到test-reactnative的檔案夾裡，再執行npm start。

npm ERR! code ENOENT

npm ERR! syscall open

npm ERR! path D:\package.json

npm ERR! errno -4058

npm ERR! enoent ENOENT: no such file or directory, open 'D:\package.json'

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

利用expo app:

• iPhone請下載 Expo Client ，利用相機掃描產生的QR Code，再利用掃描到的QR Code開啟Expo。

• Android請下載 Expo ，啟動expo，利用App裡的Scan QR Code，掃描產生的QR Code。

樣板程式

我們來說明一下expo init所產生出來的程式碼，主要的檔案是

App.js

import React from 'react';

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

export default function App() {

return (

<View style={styles.container}>

<Text>Open up App.js to start working on your app!</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

接下來，說明一下語法。首先是import，import就跟Java的import一樣，是定義要引用的模組 (如:元件、StyleSheet) (詳參: 模組系統)

import React from 'react';

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

另外，開始頁面要寫在App裡，App是個functional component，這個function的回傳值就是要顯示的內容。

• 淺談JavaScript ES6的import與import{}及export及export default使用方式

export default function App() {

return (

);

}

為什麼是App呢? 因為在package.json中指定main要開啟AppEntry.js。package.json在react及react native裡扮演很重要的角色，基本上就是整個App的設定檔。

{

"main": "node_modules/expo/AppEntry.js",

"scripts": {

"start": "expo start",

"android": "expo start --android",

"ios": "expo start --ios",

"web": "expo start --web",

"eject": "expo eject"

},

"dependencies": {

"expo": "~37.0.3",

"react": "~16.9.0",

"react-dom": "~16.9.0",

"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",

"react-native-web": "~0.11.7"

},

"devDependencies": {

"babel-preset-expo": "~8.1.0",

"@babel/core": "^7.8.6"

},

"private": true

}

node_modules/expo/AppEntry.js的內容，利用registerRootComponent設定起始的元件為App:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

App回傳兩個react native內建的元件，一個是View，View裡面包括了一個Text。這邊的語法是JSX (JavaScript XML)，看起來像是html，其實不是。

• View

  • React Native 基礎元件 <View> 簡介

• Text

  • React Native 基礎元件 <Text> 簡介

• React JSX

• JSX Specification

export default function App() {

return (

<View>

<Text>Open up App.js to start working on your app!</Text>

</View>

);

}

• • How to comment in React JSX

export default function App() {

return (

<View>

<Text>Open up App.js to start working on your app!</Text>{/*註解*/}

</View>

);

}

加上style (詳參:StyleSheet)

export default function App() {

return (

<View style={styles.container}>

<Text>Open up App.js to start working on your app!</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

});

Git

建議大家使用git來管理自己的專案。可利用git cmd先設定個人資料，在機房:

git config user.name "yourname"

git config user.email "yourname@im.fju.edu.tw"

在家裡:

git config --global user.name "yourname"

git config --global user.email "yourname@im.fju.edu.tw"

可以利用

git config --list

看目前的設定，詳參:How to show or change your Git username or email address。

先在gitlab或github新增一個專案，再把我們剛剛的專案push到git上面。記得要使用你自己的url。

cd test-reactnative

初始化我們的git專案

git init

新增我們的remote

git remote add <name> <url>

如果我們的remote叫做origin

git remote add origin https://gitlab.com/youraccount/yourproject.git

設定目前目錄下的檔案是可以commit的

git add .

進行commit的動作，並設定這次commit的註解

git commit -m "Initial commit"

把commit好的檔案push上去

git push <repository> <refspec>

如果我們的remote叫做origin，push到master

git push -u origin master

由於.gitignore已經設定好了，git只會push有必要的檔案上去，上傳的速度會滿快的。

.gitignore

node_modules/**/*

.expo/*

npm-debug.*

*.jks

*.p8

*.p12

*.key

*.mobileprovision

*.orig.*

web-build/

# macOS

.DS_Store

下次進機房時，利用clone把專案複製下來

git clone https://gitlab.com/youraccount/yourproject.git

clone下來之後，會產生一個檔案夾，接下來的操作要先換到該檔案夾裡。

因為push到gitlab/github時，並沒有把node_modules裡的檔案上傳上去，第一次執行前要記得先安裝相關的套件

expo install

執行專案

npm start

看遠端的branch

git ls-remote

切換branch(如:ben)

git checkout ben

細節請參考Git (web programming教材)

• Git 指令 – 常用指令

常見問題

expo

我的expo是使用yarn而不是npm，要怎麼換回來?

• react-native: switch from yarn to npm

有時候，在安裝套件時，會有奇怪的錯誤，可以先進行:

expo install

如果還是有問題，可以清空cache

npm cache clean --force

清空並啟動:

npm start --reset-cache

清空expo的cache:

expo start --clear

或

expo r -c

• How can I clean (reset cache) of React Native using Expo.

如果要更新套件的版本，可以進行更新:

expo update

如果看到

Unrecognized event: {"type":"client_log","level":"log","data":....

要更新expo-cli (詳參:Unrecognized event after upgrade to Expo SDK 38.0.0 from ~37.0.3 、Expo SDK 38 is now available 、Expo SDK 39 is now available )

npm install -g expo-cli

• 再安裝及更新套件。