iT邦幫忙

react-native相關文章
共有 296 則文章
鐵人賽 Mobile Development DAY 19

技術 Day 25. 以 Notifee 實作本地端推播定時通知

以 Notifee 新增本地端定時推播 現在我們對於 Notifee 如何新增、修改、刪除本地端推播通知,已經有了初步認識。不過實務上不太可能會設計按鈕,按下去...

鐵人賽 Mobile Development DAY 19

技術 Day 24. 認識 Notifee 與基本功能

使用 Notifee 新增本地端推播 App 時常會透過推播訊息,來告訴用戶資訊、提醒時間等。Notifee 是一款能透過簡單 API ,達成多元功能的推播函式...

鐵人賽 Mobile Development DAY 19

技術 Day 23. 從實作收藏功能,認識 AsyncStorage

在這個章節我們要製作一個簡易的菜單收藏功能。當用戶按下收藏後,可以在收藏頁看到他收藏了哪些菜,並能刪除不要的收藏。 先製作兩個頁面元件,分別呈現菜單和收藏的內容...

鐵人賽 Mobile Development DAY 19

技術 Day 22. 從製作語言切換功能,認識 Redux

從製作語言切換功能,認識 Redux 前面我們曾介紹過 Props 能將父元件的資料傳到子元件。不過 Props 只能層層傳遞,無法在同層之間傳遞。例如當我要從...

鐵人賽 Mobile Development DAY 19

技術 Day 21. 從實作抽屜,認識 onContentSizeChange

延續上一節的內容,這次換成製作開關抽屜的功能,在認識知識點之前,先來完成一個簡單的抽屜。 抽屜基本架構分成在外面的標題 title 、打開抽屜後顯示的內容 co...

鐵人賽 Mobile Development DAY 19

技術 Day 20. 從實作 onTop 按鈕,認識 useRef 與 scrollTo

內容很多的網站,時常會在右下角設計一個 onTop 按鈕。那要如何在 App 中達成,「按下某個按鈕,就滑到特定區塊」這種功能呢? 首先,來拆解一下功能。我們需...

鐵人賽 自我挑戰組 DAY 23
React Native 奇幻之旅 系列 第 23

技術 【DAY23】React Native 使用 Amplify 進行身份驗證(3) - 記住登入狀態、自動登入

主要的身份驗證部分在前兩天已經寫完了,這篇要分享的是我在過程中遇到的問題以及解決方式。 修改驗證信內容 這是驗證信預設的內容: 如果想要修改的話,可以到 Am...

鐵人賽 Mobile Development DAY 19

技術 Day 19 - RNDateTimePicker製作日期時間選單

本篇要來介紹日期時間選擇器第三方元件React Native Datetimepicker下稱RNDateTimePicker RNDateTimePicker...

鐵人賽 Mobile Development DAY 8

技術 Day 8 - 如何使用 Checkbox 讓使用者勾選已完成

在前面的文章,我們已經建立了一個基礎的 Todo List,並且對輸入的待辦事項進行了一些優化。今天,我們將進一步擴充其功能,讓使用者能夠勾選已完成的待辦事項。...

鐵人賽 Mobile Development DAY 16
React Native CLI 開發心法 系列 第 16

技術 DAY 16 React Native Android 上架前哨戰 - 使用 Google Play 商店發布測試

本篇將分享如何使用 Google play 發佈你要測試的 Android 應用程式。 情境: APP 的開發到一個段落了,即將要上架,想要在上架前做最後的確認...

鐵人賽 Mobile Development DAY 18

技術 Day 18 - React Native WebView 嵌入外部網頁

本篇開始前,還是來看一下真實的內部討論情況 PM:剩下十天,APP地圖功能還沒做,怎麼辦工程師:先使用WebView把現有網頁鑲嵌上去?PM:「越快越好」、「...

鐵人賽 Mobile Development DAY 7

技術 Day 7 - 避免使用者輸入空字串

目前我們的 Todo List 已經達到最基本的輸入文字,而且顯示在畫面上。不過還是有很多可以改進的地方,例如什麼都不輸入或者是輸入空字串,按下新增按鈕的話,他...

鐵人賽 Mobile Development DAY 19

技術 Day 19. 從實作跑馬燈,認識 Animated

在 React Native 中,可以透過 Animations 達成動畫效果,而 Animations 又包括 Animated 和 LayoutAnimat...

鐵人賽 Mobile Development DAY 17

技術 Day 17 - React Native Modal實作手機彈跳視窗

本篇要來介紹React Native核心Component Modal Modal 介紹 Modal 用於在當前畫面之上顯示一個疊加的子視窗通常用於顯示...

鐵人賽 Mobile Development DAY 6

技術 Day 6 - 使用 React Native 的列表元件展示待辦事項

目前已經可以做到怎麼新增待辦事項,不過我們都還沒讓其顯示在畫面上,所以今天要來示範如何在 App 中使用 FlatList。 為什麼選擇 FlatList? 每...

鐵人賽 Mobile Development DAY 15
React Native CLI 開發心法 系列 第 15

技術 DAY 15 使用 Firebase 發佈 React Native 測試版 APP - 發佈應用程式

使用 Firebase 發佈測試版本的應用程式的好處在於可以便於同時管理跨平台的應用程式,同時可用 Performance 的監控各項效能指標與使用 Crash...

鐵人賽 Mobile Development DAY 18

技術 Day 18. 運用 Platform 與 react-native-responsive-screen 解決響應式問題吧!

認識 React Native Platform 在開發雙平台 App 時,相信大家都有察覺到 Android iOS兩者在預設樣式上有所不同。例如 Heade...

鐵人賽 Mobile Development DAY 16

技術 Day 16 - React Native FlatList、RefreshControl 實作滑動式清單

本篇要來介紹React Native兩項核心Component FlatList RefreshControl 日常在FaceBook、Instgram、F...

鐵人賽 Mobile Development DAY 5

技術 Day 5 - 使用 context 和 useReducer 來管理與傳遞資料狀態

在日益複雜的前端開發環境中,如何有效地組織和管理程式碼,已成為前端工程師不可迴避的課題。今天,我們將深入探討模組化開發的重要性,以及如何運用 React 的 c...

鐵人賽 Mobile Development DAY 14
React Native CLI 開發心法 系列 第 14

技術 DAY 14 使用 Firebase 發佈 React Native 測試版 APP - 多種環境配置

現在了解了如何打包 Andriod 的 APK 跟 iOS 的 IPA ,接下來要使用 Firebase 來發佈這些打包好的應用程式,以提供其他人安裝測試版應用...

鐵人賽 Mobile Development DAY 17

技術 Day 17. 在 React Native 中引入 Icon

開發網頁時,我們可以引入 FontAwesome 、 Material Icons 等,透過 Icons 美化畫面與增添豐富度,在 App ,同樣也能做到這件...

鐵人賽 Mobile Development DAY 4

技術 Day 4 - 新增一個表單來加入新的待辦事項

大家好!今天的目標是實現一個基本但非常重要的功能,新增一個表單來加入新的待辦事項。 一個表單最基本的會有一個輸入框還有一個按鈕,我們將會示範如何使用 React...

鐵人賽 Mobile Development DAY 15

技術 Day 15 - MaterialTopTabsNavigator實作頂部切換式分頁

上篇有介紹「底部切換式分頁」React Navigation 其實還有提供「頂部切換式分頁」 大家可以先打開Line APP,然後點開LineToday左右滑動...

鐵人賽 Mobile Development DAY 13
React Native CLI 開發心法 系列 第 13

技術 DAY 13 React Native iOS 打包 - IPA

上一篇介紹了 Andriod 打包的方式,接著就是 iOS ,會先以 Xcode 的介面了解如何存擋、打包的你的應用程式,再來是將這一系列步驟使用 comman...

鐵人賽 Mobile Development DAY 16

技術 Day 16. 以 React Navigation 建立巢狀路由

當頁面很多時,可進一步透過巢狀路由來管理頁面,讓頁面架構更清楚。以 Google Podcast 為例,下面有一個 Bottom Navigation 。其中媒...

鐵人賽 Mobile Development DAY 14

技術 Day 14 - BottomTabNavigator實作底部切換式分頁

日常在使用Facebook、Instagram、Line APP時是不是會看到下方能切換首頁、個人檔案、功能表、朋友及通知的選單那麼就讓我們實作切換式選單吧 ※...

鐵人賽 Mobile Development DAY 3

技術 Day 3 - 介紹 React Native 元件以及樣式設定

歡迎來到本系列文章的第三天! 希望你已經對我們的第一個專案-Todo List App 有所期待。今天我們要談論的主題是 React Native 元件和樣式設...

鐵人賽 Mobile Development DAY 12
React Native CLI 開發心法 系列 第 12

技術 DAY 12 React Native Android 打包 - APK & AAB

當我們的 React Native 開發到一個進度後,通常會將開發的這包程式碼打包成 Andorid 裝置可以安裝的 AAB 和 APK 檔案。那 AAB 是什...

鐵人賽 Mobile Development DAY 11
React Native CLI 開發心法 系列 第 11

技術 DAY 11 React Native 環境變數設定 - iOS

上一篇設定好了 Android 的開發環境與環境變數,這篇要來設置 iOS 的環境變數,過程中會使用到 Xcode。 設置 iOS 的環境變數 1. 在 Xco...

鐵人賽 Mobile Development DAY 15

技術 Day 15. 以 React Navigation 做路由設定與建立 Bottom Navigation

在 React Navigation 中做路由設定 在手機中,有一些關於 App 導覽列的設定,例如左邊有返回鍵、中間呈現頁面標題等等,並且會根據 Androi...