iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Mobile Development

卡卡30天學 React Native系列 第 11

[ 卡卡 DAY 11 ] - React Native UI 元件(component) 介紹(上)

  • 分享至 

  • xImage
  •  

不論是 React 或著 React Native 最主要的亮點就是元件式開發
做出很多獨立 元件(component),然後使用這些元件(component) 來組出一個使用者想要的畫面。
因為 component 的邏輯是使用 JS,所以不需要依賴 DOM,就可以輕鬆地傳遞複雜的資料!
今天主要的是今天主要的是介紹 React Native 提供的基礎組建!

先來講講 Component 實作

React Native 有以下這兩個實作方法:

  1. funtion Components
  2. class Components

官方參考

不論是哪個 React component 都必須像 Pure function 一般保護他的 props

React Native 元件(component) 相對應其他裝置是什麼?

  1. 基本元件
REACT NATIVE ANDROID iOS WEB 敘述
View ViewGroup UIView div 是一個沒有滾動效果的容器
Text TextView UITextView p 文字的呈現
Image ImageView UIImageView img 圖片,還有提供ImageBackground 設定背景
ScrollView ScrollView UIScrollView div 是一個有滾動效果的容器
TextInput EditText UITextField input 輸入框

PS. 由於 React Native 使用與 React 组件相同的 API 結構,所以了解 React 後才會更好上手。

  1. 溝通控制元件
REACT NATIVE WEB 敘述
Button button 最基本的 button,只提提供一點的樣式調整,若要客製按鈕需使用 TouchableOpacity
Switch - switch 裝置,提供 onValueChange

以上這些元件都是超級基本的元件~

Day 11 done 大概就介紹到這裡嚕!


上一篇
[ 卡卡 DAY 10 ] - React native 如何讓樣式更簡潔 之 margin, padding 回到 css 寫法
下一篇
[ 卡卡 DAY 12 ] - React Native UI 元件(component) 介紹(下)
系列文
卡卡30天學 React Native31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言