React Native第六章

🧱 一、Modal 模态框组件

✅ 基本介绍

Modal 用于在当前页面上方显示一个浮层内容（比如弹窗、提示、加载中等）。
它会阻止用户与底层视图交互。

---

🔧 常用属性（props）

属性	类型	默认值	说明
animationType	`'none'	'slide'	'fade'`
transparent	boolean	false	是否背景透明
visible	boolean	false	是否显示Modal
onRequestClose	function	-	Android物理返回键触发的回调
onShow	function	-	Modal显示时的回调
statusBarTranslucent	boolean	false	是否使状态栏透明（仅Android）

---

🧩 示例：一个简单的弹窗

import React, { useState } from 'react';
import { View, Text, Modal, Button, StyleSheet } from 'react-native';const ModalExample = () => {const [visible, setVisible] = useState(false);return (<View style={styles.container}><Button title="打开弹窗" onPress={() => setVisible(true)} /><ModalanimationType="slide"transparent={true}visible={visible}onRequestClose={() => setVisible(false)}><View style={styles.modalBackground}><View style={styles.modalBox}><Text style={{ fontSize: 18, marginBottom: 10 }}>这是一个Modal弹窗！</Text><Button title="关闭" onPress={() => setVisible(false)} /></View></View></Modal></View>);
};const styles = StyleSheet.create({container: { flex: 1, justifyContent: 'center', alignItems: 'center' },modalBackground: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' },modalBox: { backgroundColor: 'white', padding: 20, borderRadius: 10, width: 250, alignItems: 'center' },
});export default ModalExample;

---

🌈 二、StatusBar 状态栏组件

✅ 基本介绍

StatusBar 用来控制手机顶部状态栏的样式（颜色、背景、可见性等）。

---

🔧 常用属性

属性	类型	默认值	说明
barStyle	`'default'	'light-content'	'dark-content'`
backgroundColor	string	-	状态栏背景色（Android）
hidden	boolean	false	是否隐藏状态栏
translucent	boolean	false	状态栏是否透明（Android）
animated	boolean	false	样式变化是否使用动画

---

🧩 示例：设置浅色背景深色文字状态栏

import React from 'react';
import { View, Text, StatusBar, StyleSheet } from 'react-native';const StatusBarExample = () => {return (<View style={styles.container}>{/* 状态栏样式 */}<StatusBarbarStyle="dark-content"backgroundColor="#f5f5f5"translucent={false}/><Text style={styles.text}>状态栏示例</Text></View>);
};const styles = StyleSheet.create({container: { flex: 1, backgroundColor: '#f5f5f5', justifyContent: 'center', alignItems: 'center' },text: { fontSize: 20 },
});export default StatusBarExample;

---

⚙️ 三、Switch 开关组件

✅ 基本介绍

Switch 是一个开关控件，常用于布尔选项（开 / 关）。

---

🔧 常用属性（props）

属性	类型	默认值	说明
value	boolean	false	当前是否打开
onValueChange	(value: boolean) => void	-	当值变化时的回调
disabled	boolean	false	是否禁用开关
trackColor	{ false?: string; true?: string }	-	开关轨道颜色
thumbColor	string	-	开关圆点颜色
ios_backgroundColor	string	-	iOS上关闭状态下轨道颜色

---

🧩 示例：控制开关状态

import React, { useState } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';const SwitchExample = () => {const [isEnabled, setIsEnabled] = useState(false);return (<View style={styles.container}><Text style={styles.text}>开关状态：{isEnabled ? '开启' : '关闭'}</Text><Switchvalue={isEnabled}onValueChange={setIsEnabled}trackColor={{ false: '#ccc', true: '#81b0ff' }}thumbColor={isEnabled ? '#007aff' : '#f4f3f4'}ios_backgroundColor="#ccc"/></View>);
};const styles = StyleSheet.create({container: { flex: 1, justifyContent: 'center', alignItems: 'center' },text: { fontSize: 18, marginBottom: 10 },
});export default SwitchExample;

---

🧭 总结对比

组件	用途	是否遮挡内容	是否交互式	典型场景
Modal	弹窗显示内容	✅ 是	✅ 是	提示、确认框、加载中
StatusBar	状态栏样式控制	❌ 否	❌ 否	改变顶部状态栏颜色、透明度
Switch	开关控件	❌ 否	✅ 是	设置开关、选项启用禁用

---