不論是 React 或著 React Native 最主要的亮點就是元件式開發
做出很多獨立 元件(component),然後使用這些元件(component) 來組出一個使用者想要的畫面。
因為 component 的邏輯是使用 JS,所以不需要依賴 DOM,就可以輕鬆地傳遞複雜的資料!
今天主要的是今天主要的是介紹 React Native 提供的基礎組建!
React Native 有以下這兩個實作方法:
不論是哪個 React component 都必須像 Pure function 一般保護他的 props
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 後才會更好上手。
REACT NATIVE | WEB | 敘述 |
---|---|---|
Button | button | 最基本的 button,只提提供一點的樣式調整,若要客製按鈕需使用 TouchableOpacity |
Switch | - | switch 裝置,提供 onValueChange |
以上這些元件都是超級基本的元件~
Day 11 done 大概就介紹到這裡嚕!