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)} />

      <Modal
        animationType="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}>
      {/* 状态栏样式 */}
      <StatusBar
        barStyle="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>
      <Switch
        value={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	开关控件	❌ 否	✅ 是	设置开关、选项启用禁用