如何在React Native Expo中修改Apple登录按钮的字号与字体

一、Apple登录按钮的字体类型 #

Apple官方登录按钮在iOS上使用的是**SF Pro（San Francisco）**字体，这是苹果全平台的默认系统字体。你可以在其他社交登录按钮中直接指定该字体，实现视觉统一：

• React Native的iOS环境会自动识别'SF Pro'字体名称；
• 如需兼容Android，可引入对应字体文件或选用风格相近的系统默认字体。

二、不更换库的前提下自定义Apple登录按钮样式 #

expo-apple-authentication提供的AppleAuthenticationButton是原生系统封装组件，受系统限制无法直接通过style修改字体、字号。你可以通过自定义按钮+调用Apple登录API的方式完全控制样式，无需额外依赖第三方库：

实现代码示例 #

import * as AppleAuthentication from 'expo-apple-authentication';
import { View, StyleSheet, TouchableOpacity, Text, Image } from 'react-native';

export default function App() {
  const handleAppleSignIn = async () => {
    try {
      const credential = await AppleAuthentication.signInAsync({
        requestedScopes: [
          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
          AppleAuthentication.AppleAuthenticationScope.EMAIL,
        ],
      });
      // 处理登录成功逻辑
    } catch (e) {
      if (e.code === 'ERR_REQUEST_CANCELED') {
        // 用户取消登录的处理逻辑
      } else {
        // 其他错误的处理逻辑
      }
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.customAppleButton}
        onPress={handleAppleSignIn}
        disabled={!AppleAuthentication.isAvailableAsync()}
      >
        {/* 可替换为Apple官方SVG图标，这里用文本示例 */}
        <Text style={styles.buttonText}>用Apple登录</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customAppleButton: {
    backgroundColor: '#000',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 5,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  buttonText: {
    fontFamily: 'SF Pro',
    fontSize: 16,
    color: '#fff',
    fontWeight: '500',
  },
});

注意事项 #

• 若需要Apple官方图标，可通过expo-icons或导入官方SVG资源实现；
• 务必通过AppleAuthentication.isAvailableAsync()判断功能可用性，禁用按钮避免无效操作；
• 自定义按钮需遵循Apple的登录按钮设计规范，确保合规。

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