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

其他常用组件

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}>
      <Image
        source={{ 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 中的。