React Native 中的 Component 與 API

5月 26 2022 React Native

第一步都是從這裡開始。

官方文件怎麼看？

這篇絕對不會把所有東西帶過一遍，所以你要知道當你需要某個功能時，你該到哪裡去找資料。

舉例來說，以這份文件來看的話，你可以從這幾個方向來找：

Core Components 跟 UI 有關的跨平台元件
Andriod Components 只能用在 Android
IOS Components 只能用在 IOS

另一個的話則是跟 Native 做溝通的相關 API，可以參考這份，如果沒有特別標注 Android 或 IOS 的話就是跨平台。

Component

<View> 就跟 HTML 中的 div 很像，可以用來群組一個區塊
<SafeAreaView> 可以解決 IOS 的瀏海擋住的問題
<Text> 跟文字有關的東西一定要放在這裡面
<Button /> 可以產生原生的按鈕（注意是 Self-Closing Tag）
<TextInput /> 輸入框
- onChangeText 可取得輸入值
- multiline 可輸入多行
- placeholder 能放佔位文字
- keyboardType 可以設定輸入框的類型（例如：numberic）
<ScrollView> 用這個包住後才會顯示滾軸，不然會被截斷
<Image /> 可以放圖片，透過 require 的方式引入
<Modal /> 可以彈出互動視窗，加上 animationType="slide" 質感會上升一倍
<ImageBackground /> 可以放背景圖片，一樣透過 require 來引入
<TouchableHighlight> 點擊效果，必須搭配 onPress 才看得出來
<TouchableOpacity 點擊效果，但可以不搭配 onPress
<TouchableWithoutFeedback> 可以用在需要點擊，但不需要反饋的事情上，例如：關閉小鍵盤
<FlatList /> 用來渲染列表（延遲載入）

補充：引入外部圖片的方法

第一種是這樣：

<Image source={{
  uri: 'https://picsum.photos/300/300',
  width: 100,
  height: 100 }} />

第二種是這樣：

<Image style={styles.img} source={{ uri: 'https://picsum.photos/300/300' } />


const styles = StyleSheet.create({
  img: {
    width: 100,
    height: 100
  }
});

不管是哪一種，都一定要記得指定寬跟高，這樣圖片才顯示的出來。

至於引入 asset 中的圖片不需要加的原因，是因為在打包的時候就會知道 meta 資訊，這是跟外部圖片不同的地方。

API

Platform 可以用來檢查使用 IOS / Android
StatusBar 跟上方列相關的東西，例如 StatusBar.currentHeight 能取得裝置的上方列高度（Android）
Dimensions.get('screen') 可以用來檢查裝置的寬高資訊，window 是 viewport，screen 是整個裝置（但在 IOS 上似乎是沒差）
Keyboard 可以做對鍵盤有關的操作，例如：Keyboard.dismiss() 可以關掉鍵盤

補充：一個不錯用的套件

@react-native-community/hooks 這個套件有提供一些不錯的 hook：

useDimensions() 顯示目前方向的寬高
useDeviceOrientation() 顯示目前的方向

補充：關於 IOS 中的 keyboard

在預設的情況下 IOS 使用，<TextInput /> 時不會自動彈出 keyboard，如果希望打開這功能，請這樣做：

I/O > Keyboard > Connect Hardware Keyboard
I/O > Input > Send Keyboard Input to Device

第一步是要把手機的小鍵盤打開，第二步是讓你能用電腦的鍵盤來輸入內容。