Expo应用中Apple Authentication按钮苹果图标尺寸与位置调整问题

官方的AppleAuthenticationButton内部布局是封装固定的，无法单独调整图标尺寸，以下是两种可行方案：

方案一：自定义Apple登录按钮（推荐，完全可控） #

自己实现按钮结构，能自由控制图标大小、位置和文字样式，同时符合Apple设计规范：

import { View, Text, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const CustomAppleSignInButton = ({ onPress }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        width: 200,
        height: 64,
        backgroundColor: '#000',
        borderRadius: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start', // 可改为center/space-between等调整整体布局
        paddingHorizontal: 16,
      }}
    >
      {/* 自定义图标大小，修改size值即可 */}
      <Ionicons name="logo-apple" size={32} color="#fff" style={{ marginRight: 12 }} />
      <Text style={{ color: '#fff', fontSize: 16, fontWeight: '500' }}>使用Apple登录</Text>
    </TouchableOpacity>
  );
};

// 使用时替换原有组件
<CustomAppleSignInButton onPress={onSignIn} />

• 修改size={32}可以直接调整图标尺寸
• 通过justifyContent、margin属性微调图标与文字的位置关系
• 按钮整体位置可通过父容器样式或alignSelf属性调整

方案二：整体缩放官方组件（快速临时方案） #

如果不想自定义组件，可通过transform属性整体缩放按钮，缺点是图标和文字会同步缩放：

<AppleAuthentication.AppleAuthenticationButton
  onPress={onSignIn}
  buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
  buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
  style={{
    width: 200,
    height: 64,
    transform: [{ scale: 1.2 }], // scale值越大，按钮整体越大
    alignSelf: 'center', // 调整按钮在父容器中的位置
  }}
/>

注意：自定义按钮时需遵循Apple的登录按钮设计规范，避免影响应用审核。

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