iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 4472 瀏覽

鐵人賽 Mobile Development DAY 19

卡卡30天學 React Native 系列第 19 篇

技術 [ 卡卡 DAY 19 ] - React Native 用 react-native-webview 實現 webview 跟 html render

在 App 需求中若頁面需要通過 URL 渲染遠端 HTML 頁面若頁面資料提供的是 html 字串在 React Native 該怎麼做呢？開始來用 rea...

熟女卡卡 ‧ 2021-10-04 ‧團隊一隻狗狗發大財

0 Like 0 留言 4334 瀏覽

鐵人賽 Modern Web DAY 12

使用 Modern Web 技術來打造 Native App 系列第 12 篇

技術 Day 12：Navigation Part I：Navigation 簡介與 Navigator

前言在 React Native 裡面，大多的概念以及 Component 都相當好上手，但 Navigation 是個例外。Routing and Navi...

C. T. Lin ‧ 2016-12-27

0 Like 0 留言 4291 瀏覽

鐵人賽 Modern Web DAY 24

使用 Modern Web 技術來打造 Native App 系列第 24 篇

技術 Day 24：在 App 上呈現 Github User 頁面

前言前一篇拼死拼活的才把 Token 拿回來，這篇要來用 Token 拿資料回來顯示 User 的頁面。準備 GraphQL Client 經過一段考慮後，...

C. T. Lin ‧ 2017-01-08

2 Like 0 留言 4089 瀏覽

鐵人賽 Modern Web DAY 10

使用 Modern Web 技術來打造 Native App 系列第 10 篇

技術 Day 10：跨平台策略

本篇目的首先我們必須認知到我們雖應該盡量的共用程式碼，但不應該完全被綁死，由於 iOS、Android 功能實作上的限制、UI 的慣例都還是有其差異，Face...

C. T. Lin ‧ 2016-12-25

0 Like 0 留言 4073 瀏覽

鐵人賽 Modern Web DAY 14

React Native 航向真全端，建構雙平台 App 系列第 14 篇

技術 React Native 跨平台設計(二) 方便的 Platform

上次有介紹到，我們可以用 .ios .android 的檔案名稱後輟來分辨我們是使用 android 還是 ios 的 Component，但是除了這個方法法外...

Fuyaode ‧ 2016-12-29

0 Like 0 留言 4041 瀏覽

鐵人賽 Modern Web DAY 21

React Native 航向真全端，建構雙平台 App 系列第 21 篇

技術 React Native App 實戰 (四) 首頁 - 卡片元件

今天我們要來刻一個簡單的卡片 UI，可以簡單的搭配 ScrollView 或是 ListView 就能完成漂亮的首頁了，主要還是用到了 FlexBox 來排版可...

Fuyaode ‧ 2017-01-05

1 Like 0 留言 4029 瀏覽

鐵人賽 Modern Web DAY 6

React Native 航向真全端，建構雙平台 App 系列第 6 篇

技術 React Native 基礎元件 <View> 簡介

View 是 React Native 最常用的元件之一，就像是網頁當中的 div 一樣，是建構 React Native 的基礎，在建構專案和 Style S...

Fuyaode ‧ 2016-12-21

0 Like 0 留言 3967 瀏覽

鐵人賽 Modern Web DAY 8

我不用Expo啦，React Native！系列第 8 篇

技術 [Day8] 輪播：神奇的上下交錯

今日關鍵字：carousel 接續昨天把資料整理好了今天要把資料呈現在畫面上（不過這裡我想的輪播其實跟一般的輪播不同,沒有要自動播放總之先來找找看）好就第一個...

b97201019 ‧ 2020-09-08

1 Like 0 留言 3935 瀏覽

鐵人賽 Mobile Development DAY 3

如何用下班時間開發App經營副業系列第 3 篇

技術 React Native 優缺點，如果現在開始做會選哪個

我們因為只有一個工程師，做 App 的話跨平台開發是很自然的選項。在2018年開發時，當初只有 React Native 跟 Xamarin 這兩個選項。但那時...

ggwu ‧ 2021-09-03

0 Like 0 留言 3868 瀏覽

鐵人賽 Mobile Development DAY 20

卡卡30天學 React Native 系列第 20 篇

技術 [ 卡卡 DAY 20 ] - React Native icon 用 react-native-vector-icons

react-native-vector-icons 是在看 React Native 所看到的這個套件自帶了十多種圖示庫，也可以將自定義圖示稍微做處理後在 R...

熟女卡卡 ‧ 2021-10-05 ‧團隊一隻狗狗發大財

1 Like 0 留言 3864 瀏覽

鐵人賽 Mobile Development DAY 7

卡卡30天學 React Native 系列第 7 篇

技術 [ 卡卡 DAY 7 ] - React Native style 必懂之 Flexbox彈性盒子(下)

上篇大致上介紹了一下於 css vs React Native 的 flexbox 差異這篇主要就是實際上的運用了！什麼是彈性盒子 flexbox ? 之...

熟女卡卡 ‧ 2021-09-22 ‧團隊一隻狗狗發大財

1 Like 0 留言 3795 瀏覽

鐵人賽 Modern Web

我不用Expo啦，React Native！系列第 31 篇

技術 [Day31] 初始畫面：原生版

今日關鍵字：Splash Screen 原本有在想都已經做了個模擬的幹嘛還要搞原生的轉念一想，模擬的或許可以改成loading的畫面總之還是來摸摸看吧先來安...

b97201019 ‧ 2020-10-01

1 Like 0 留言 3647 瀏覽

鐵人賽 Modern Web DAY 9

我不用Expo啦，React Native！系列第 9 篇

技術 [Day9] Redux：我是大家的無人機

今日關鍵字：無人...Redux 假如有一天，你在家煮了咖哩不小心煮了太多想分給對面的人如果是以前都是平房時直接走過去就好如果場景變換成現代你住在高樓裡該怎...

b97201019 ‧ 2020-09-09

0 Like 0 留言 3584 瀏覽

鐵人賽 Modern Web DAY 24

我不用Expo啦，React Native！系列第 24 篇

技術 [Day24] 語言切換-1：沒有萬能的許願機

今日關鍵字：i18n 雖然有聽過i18n，但一直沒用過想像中用起來大概是： import { translate, ja } from 'i18n' con...

b97201019 ‧ 2020-09-24

0 Like 0 留言 3573 瀏覽

鐵人賽 Modern Web DAY 7

Expo --- 跨平台 App 開發從零到上架系列第 7 篇

技術 Expo DAY7 --- View, Text & Assets

Expo DAY7 --- View, Text & Assets tags: day7 iThome鐵人賽2018 ReactNative Expo...

iamcxa ‧ 2017-12-11

0 Like 0 留言 3449 瀏覽

鐵人賽 Modern Web DAY 22

React Native 航向真全端，建構雙平台 App 系列第 22 篇

技術 React Native App 實戰 (五) 首頁 - 實戰 ListView

前兩天的實戰(三)、(四)已經把首頁完成一半了，但是目前首頁的部分還是使用 View 來簡單顯示我們做的 Component，今天要使用 ListView 串接...

Fuyaode ‧ 2017-01-06

1 Like 0 留言 3423 瀏覽

鐵人賽 Mobile Development DAY 21

卡卡30天學 React Native 系列第 21 篇

技術 [ 卡卡 DAY 21 ] - React Native 資料手機存起來 AsyncStorage

如果怕手機關掉東西就不見了來使用 AsyncStorage 將狀態存到手機也就是 local storage 裡吧！ AsyncStorage 一個簡單、非...

熟女卡卡 ‧ 2021-10-06 ‧團隊一隻狗狗發大財

0 Like 0 留言 3387 瀏覽

鐵人賽 Modern Web DAY 10

我不用Expo啦，React Native！系列第 10 篇

技術 [Day10] 建立與細節頁面之連結

今日關鍵字：stack navigation 現在想要在首頁上點擊輪播中的其中一個動畫時就跳到其細節頁面該怎麼做呢？這時候又需要Navigation了不過不...

b97201019 ‧ 2020-09-10

0 Like 0 留言 3365 瀏覽

鐵人賽 Modern Web DAY 23

React Native 航向真全端，建構雙平台 App 系列第 23 篇

技術 React Native App 實戰 (六) PostDetail - 商品頁面

昨天我們已經把 Home 完成並且點了下面的商品會進入 PostDetail，PostDetail 目前還是使用之前簡單的 Card 擋一下，今天要把他刻漂亮一...

Fuyaode ‧ 2017-01-07

0 Like 0 留言 3356 瀏覽

鐵人賽 Mobile Development DAY 15

卡卡30天學 React Native 系列第 15 篇

技術 [ 卡卡 DAY 15 ] - React Native 頁面導覽 Navigation (下)

接下來要在頁面上按下按鈕跳頁以及按了左邊 header icon 回上一頁正所謂有去有回才不會不知道怎麼辦！在 App.js 的 Home 建立一個換頁的...

熟女卡卡 ‧ 2021-09-30 ‧團隊一隻狗狗發大財

0 Like 0 留言 3265 瀏覽

鐵人賽 Modern Web DAY 16

我不用Expo啦，React Native！系列第 16 篇

技術 [Day16] 提醒功能-1：設定環境

今日關鍵字：notification 當初想要完成的最重要功能就是這個了動畫開播三十分鐘前請通知我一下！首先還是上github尋找看看沒有特別原因我都會選星...

b97201019 ‧ 2020-09-16

1 Like 1 留言 3258 瀏覽

鐵人賽 Mobile Development DAY 3

卡卡30天學 React Native 系列第 3 篇

技術 [ 卡卡 DAY 3 ] - React Native 環境建立輕鬆上手

React Native 我的安裝步驟： Node.js，我使用 Homebrew 來安裝，所以會先安裝 Homebrew！再來安裝 Node.jsNode...

熟女卡卡 ‧ 2021-09-18 ‧團隊一隻狗狗發大財

1 Like 0 留言 3078 瀏覽

鐵人賽 Modern Web DAY 13

使用 Modern Web 技術來打造 Native App 系列第 13 篇

技術 Day 13：Navigation Part II：新的 API - NavigationExperimental

前言 Product Pain 是 React Native 聆聽社群聲音的重要平台，而在上面 Navigator 是個知名的「Pain」，也催生了 Navig...

C. T. Lin ‧ 2016-12-28

1 Like 1 留言 3042 瀏覽

鐵人賽 Mobile Development DAY 16

卡卡30天學 React Native 系列第 16 篇

技術 [ 卡卡 DAY 16 ] - React Native Animated 入門 + useNativeDriver 好棒棒

React Native 提供了 Animated 及 LayoutAnimation API給使用者有良好的體驗加點動畫是必須的 Animated API...

熟女卡卡 ‧ 2021-10-01 ‧團隊一隻狗狗發大財

0 Like 0 留言 2912 瀏覽

鐵人賽 Mobile Development DAY 29

卡卡30天學 React Native 系列第 29 篇

技術 [ 卡卡 DAY 29 ] - React Native iOS 打包步驟及離線 jsbundle產生

因為實在有太多東西想分享了，但已經 29 天了我們先來個 iOS 打包步驟完成開發後再來就是要如何打包及送審發佈今天來嘗試分享這部分吧！打包前情提要基本...

熟女卡卡 ‧ 2021-10-14 ‧團隊一隻狗狗發大財

0 Like 0 留言 2904 瀏覽

鐵人賽 Mobile Development DAY 14

卡卡30天學 React Native 系列第 14 篇

技術 [ 卡卡 DAY 14 ] - React Native 頁面導覽 Navigation (中)

昨天的文章中已將 navigation 安裝完成今天就要開始當導覽王了！一起來轉頁吧吧吧～事先準備先建立一個頁面來當跳轉的頁面 .src...

熟女卡卡 ‧ 2021-09-29 ‧團隊一隻狗狗發大財

0 Like 0 留言 2879 瀏覽

鐵人賽 Modern Web DAY 7

我不用Expo啦，React Native！系列第 7 篇

技術 [Day7] 訂定資料格式-2

今日關鍵字：interface 建立動畫格式延續昨天的interface首先幫我的動畫資料訂定格式這時如果要設定一個動畫陣列 [Anime1 ,Anime...

b97201019 ‧ 2020-09-07

0 Like 0 留言 2876 瀏覽

鐵人賽 Modern Web DAY 8

Expo --- 跨平台 App 開發從零到上架系列第 8 篇

技術 Expo DAY8 --- Touchable, Icons & Speech

Expo DAY8 --- Touchable, Icons & Speech tags: day5 iThome鐵人賽2018 ReactNative...

iamcxa ‧ 2017-12-12

0 Like 2 留言 2836 瀏覽

鐵人賽 Mobile Development DAY 30

卡卡30天學 React Native 系列第 30 篇

技術 [ 卡卡 DAY 30 ] - React Native codepush iOS 熱更新

第一次認識 React Native 就是因為熱更新所以怎麼可以不介紹大家一下呢～AppCenter 熱更新（codepush）你聽過嗎? 熱更新是什麼?...

熟女卡卡 ‧ 2021-10-15 ‧團隊一隻狗狗發大財

0 Like 0 留言 2820 瀏覽

鐵人賽 Modern Web DAY 29

我不用Expo啦，React Native！系列第 29 篇

技術 [Day29] Build成App

由於手上沒有iOS手機，所以這裡只build成apk 打包成Apk 首先要用keytool生成一把key在終端機輸入 keytool -genkeypair...

b97201019 ‧ 2020-09-29