View 是 React Native 最常用的元件之一,就像是網頁當中的 div 一樣,是建構 React Native 的基礎,在建構專案和 Style Sheet 章節中我們都有用到,今天來簡單介紹一下他要怎麼用吧。
只要在 Component 開頭 import { View } from 'react-native';
就能使用摟。
使用方法就像這樣
<View style={{ flex: 1 }}>
<View style={{backgroundColor: 'cadetblue', flex: 1}} />
<View style={{backgroundColor: 'blue', flex: 1}} />
</View>
結果會像這樣
View 當中能互相嵌套,排版出不同的效果,裡面能放你要顯示的文字或是輸入框,搭配 Style 就能變成漂漂亮亮的 UI 了,仔細看 Style 這裡有出現一個陌生的樣式 flex
,這個例子中我們並沒有用 height 或是拿螢幕高度就簡單的把螢幕二分而一,很方便吧,明天會深入的介紹 React Native 排版非常方便的 FlexBox !!
今天就簡單的介紹到這裡,大家可以試試看在 style 加上 margin、padding 玩玩看。
有問題歡迎來 React Native Taiwan 問喔
創科資訊