人力资源公司网站模板搜狗营销
其他常用组件
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 中的。