React Native Expo中Switch类组件如何转为Hook函数组件并对接Firestore

首先需要先导入对应依赖：

import React, { useState } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';
import { doc, setDoc } from 'firebase/firestore';
import { db } from './你的firebase配置文件路径'; // 替换为你自己项目的Firestore实例导入路径

转换后的函数组件代码如下：

const UserSwitchSetting = ({ user }) => {
  // 对应类组件的state初始化
  const [showMen, setShowMen] = useState(user.showMen);
  const [showWomen, setShowWomen] = useState(user.showWomen);

  // 替换原实时数据库更新方法，改为Firestore写入
  const updateUser = async (key, value) => {
    const userDocRef = doc(db, 'Users', user.uid);
    // merge: true保证只更新指定字段，不覆盖用户文档其他已有数据
    await setDoc(userDocRef, { [key]: value }, { merge: true });
  };

  return (
    <View>
      <View style={styles.switch}>
        <Text>Show Men</Text>
        <Switch
          value={showMen}
          onValueChange={async (val) => {
            setShowMen(val);
            await updateUser('showMen', val);
          }}
        />
      </View>
      <View style={styles.switch}>
        <Text>Show Women</Text>
        <Switch
          value={showWomen}
          onValueChange={async (val) => {
            setShowWomen(val);
            await updateUser('showWomen', val);
          }}
        />
      </View>
    </View>
  );
};

// 原有样式保持不变即可
const styles = StyleSheet.create({
  switch: {
    // 你原来的样式定义
  }
});

export default UserSwitchSetting;

• 请将代码中的db替换为你项目中初始化完成的Firestore实例
• 若你的用户数据存储的集合名称不是Users，修改doc()方法中对应的集合名即可
• 如果需要处理更新失败的场景，可以给updateUser方法添加try/catch捕获异常

内容的提问来源于stack exchange，提问作者user17466327