iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Mobile Development

卡卡30天學 React Native 系列

React native
建立專案
UI
Style
iOS/android設定
完成project

鐵人鍊成 | 共 30 篇文章 | 12 人訂閱 訂閱系列文 RSS系列文 團隊一隻狗狗發大財
DAY 1

[ 卡卡DAY 1 ] - React Native 一個 target 一個 start

背景與前言: 我是個轉職的前端工程師,近期因專案需要開始寫APP,基於我有React的基礎,所以選擇React Native的相對比swift跟kotlin好上...

2021-09-16 ‧ 由 熟女卡卡 分享
DAY 2

[ 卡卡 DAY 2 ] - React Native 是什麼? 原理?優點?

起源 於 2015 年 3 月 Facebook 開放了 React Native 的原始碼,讓使用者可以利用 JavaScript 和 React 建立原生...

2021-09-17 ‧ 由 熟女卡卡 分享
DAY 3

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

React Native 我的安裝步驟: Node.js,我使用 Homebrew 來安裝,所以會先安裝 Homebrew!再來安裝 Node.js Nod...

2021-09-18 ‧ 由 熟女卡卡 分享
DAY 4

[ 卡卡 DAY 4 ] - React Native 專案結構

我的資料結構 . ├── App.js // App root component,the start of JS code ├── android/ /...

2021-09-19 ‧ 由 熟女卡卡 分享
DAY 5

[ 卡卡 DAY 5 ] - Style in React Native - inline style vs StyleSheet

在 React Native 提供兩種方式引入樣式 寫 inline style 運用官方提供的 StyleSheet 的 function 建立一個抽象的...

2021-09-20 ‧ 由 熟女卡卡 分享
DAY 6

[ 卡卡DAY 6 ] - React Native style 必懂之 Flexbox 彈性盒子(上)

在手機裝置中, Flexbox 彈性盒子是一個重點樣式 倘若你不懂,就只能躺著被打 orz React Native 與 css 的彈性盒子雷同大致上就只有幾...

2021-09-21 ‧ 由 熟女卡卡 分享
DAY 7

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

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

2021-09-22 ‧ 由 熟女卡卡 分享
DAY 8

[ 卡卡 DAY 8 ] - React Native 跨平台裝置判斷

還記得 React Native 可以同時完成 iOS / Android 裝置吧? 跨平台裝置如果不同 style 要如何設定? 跨平台裝置如果整個頁面都不...

2021-09-23 ‧ 由 熟女卡卡 分享
DAY 9

[ 卡卡 DAY 9 ] - React Native style 優化、共用沒煩惱!window.innerWidth 在 RN 怎麼處理?

有沒有想過如果我要調整整個 App 的主色或字體大小,要一個一個元件改有多累? 有沒有想過只要改一次就能完成該怎麼做!? 今天的主題,一改全改、共用沒煩惱!交...

2021-09-24 ‧ 由 熟女卡卡 分享
DAY 10

[ 卡卡 DAY 10 ] - React native 如何讓樣式更簡潔 之 margin, padding 回到 css 寫法

還記得之前有提到在 Day 5 有提到 React Native 的 margin / padding / border ? 針對這麼不合理的寫法我們要怎麼讓...

2021-09-25 ‧ 由 熟女卡卡 分享