其他常用組件

swich

https://reactnative.dev/docs/next/switch

alert

Alert · React Native

如果想增加里面的按鈕，就往這個數組里，按照這個格式不斷的加東西就行了。但是：

• 在iOS上，里面多少個都有問題，3 個以上它會自動變成豎排。
• 但是Android上，不要超過 3 個。當超過 3 個以上，就顯示不出來了。

Dimensions

Dimensions，它是用來獲取當前設備的寬和高的：

import { View, Text, StyleSheet, Dimensions } from 'react-native';const { width, height } = Dimensions.get('window');export default function App() {return (<View style={styles.container}><Text style={styles.text}>屏幕寬度: {width}, 高度: {height}</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',},text: {fontSize: 20,},
});

StatusBar 狀態欄

StatusBar，控制設備狀態欄。頂部那些電量、信號、時間等信息。可以控制它的顏色，以及是否顯示。

import { StatusBar } from "react-native";export default function App() {return <StatusBar />;
}

默認就是顯示出來的，它還會根據設備的主題色，自動切換是黑色還是白色的。所以一般來說并不需要設置它。只有在某些全屏頁面，不想顯示狀態欄的時候，可以這么寫，加上hidden屬性。

Image 圖片

Image組件 用來顯示圖片的。

import { View, Image, StyleSheet } from 'react-native';export default function App() {return (<View style={styles.container}><Imagesource={{ uri: `${process.env.EXPO_PUBLIC_API_URL}/uploads/images/avatar-user.png` }}style={styles.image}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#fff',},image: {width: 200,height: 200,},
});

在Expo里，也有個Image組件，安裝下expo-image：

npx expo install expo-image

用起來，只需要把引用改成expo-image，其他的完全一樣，也是可以正常顯示的

expo-image里面的可用屬性，比React Native里的多很多。甚至還自帶了圖片緩存，默認設置的是使用磁盤緩存。所以，如果遇到 rn 和 expo 中都有的，可以優先使用 expo 中的。