当前位置：首页 > news >正文

【React Native】Switch、Alert、Dimensions、StatusBar、Image组件

news 2025/7/15 5:45:31

其他常用组件

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：