[RN] 看YT學React Native – UI 範例1

idobest

前言:

接下來幾篇的文章內容是以UI為主，影片一樣是從YT上面挑選我認為不錯的教學影片
這是我個人學習的紀錄，並不是手把手的教學文章，如果有人也是剛入門的話
照著影片內容實做也能完成 🙂

目前開發環境:

node.js: v14.17.6
npm: 6.14.15
react: 17.0.1
react-native: 0.64.3
expo: 44.0.4
※手機需要安裝 EXPO Go (Android / iOS)

React Native 套件:

這個影片中把套件安裝的過程省略了，所以在這補充

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install react-native-vector-icons

npm install @react-navigation/stack

成果預覽圖:

圖1

影片:

程式碼:

實作的完成檔:

git clone https://smilehsu@bitbucket.org/smilehsu/yt_example_plantui0128.git
尚待補充的地方:

這個範例用到Navigation 這個套件，原本想在這邊補上
一個使用Navigation的範例，發現之前的紀錄筆記寫的有點亂
日後有空修正再補上，有興趣的可以直接看官網的範例 XD

Reference: