https://github.com/spenguinlui/react-native-foods

作品 - 營養料理模擬器
https://github.com/spenguinlui/react-native-foods

react react-native redux

Last synced: 3 months ago
JSON representation

作品 - 營養料理模擬器

• Host: GitHub
• URL: https://github.com/spenguinlui/react-native-foods
• Owner: spenguinlui
• Created: 2021-05-09T07:00:28.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-31T07:02:18.000Z (about 5 years ago)
• Last Synced: 2025-01-05T22:43:46.499Z (over 1 year ago)
• Topics: react, react-native, redux
• Language: JavaScript
• Homepage:
• Size: 5.9 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Native 練習作品

## 畫面呈現

首頁、食材清單、食材收藏

---

![](https://github.com/spenguinlui/react-native-foods/blob/master/page1.png)

料理、食譜

---

![](https://github.com/spenguinlui/react-native-foods/blob/master/page2.png)

品項細節

---

![](https://github.com/spenguinlui/react-native-foods/blob/master/page3.png)

## 資料來源

[政府資料開放平臺](https://data.gov.tw/dataset/8543)

因為來源的 JSON 資料格式不太會解析，因此是下載 csv 檔，

自己命名各項標題後重新輸出 json 格式。

轉換過程可參考 csv_to_json.rb 檔案 (ruby 2.6.6)

## 主要使用到的相關元件：

* [async-storage](https://github.com/react-native-async-storage/async-storage)

* [bottom-tabs](https://reactnavigation.org/docs/bottom-tab-navigator/)

* [stack](https://reactnavigation.org/docs/stack-navigator/)

* [swiper](https://github.com/leecade/react-native-swiper)

* [vector-icons(列表)](https://oblador.github.io/react-native-vector-icons/)

* [redux-react-hook(這是套件名稱)](https://github.com/facebookincubator/redux-react-hook)

## 目前測試機型：

* iphone 8

* iphone 12

換機型方法：

    `expo start -c` 然後 `shift + i` 等一會兒才會跳出機型列表