React-native中的自定义按钮设计“用Apple登录”

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const AppleLoginButton = ({ onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={styles.buttonText}>用Apple登录</Text>
    </TouchableOpacity>
  );
};

const styles = {
  button: {
    backgroundColor: '#000',
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
};

export default AppleLoginButton;

import React from 'react';
import { View, Alert } from 'react-native';
import AppleLoginButton from './AppleLoginButton';

const App = () => {
  const handleAppleLogin = () => {
    // 处理“用Apple登录”逻辑
    Alert.alert('Apple登录');
  };

  return (
    <View>
      {/* 其他内容 */}
      <AppleLoginButton onPress={handleAppleLogin} />
    </View>
  );
};

export default App;