You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
31 lines
1.2 KiB
31 lines
1.2 KiB
import { ActivityIndicator, Pressable, StyleSheet, Text } from 'react-native';
|
|
import { colors } from '../../../src/theme';
|
|
|
|
interface Props {
|
|
label: string;
|
|
active?: boolean;
|
|
onPress?: () => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
/** 主按钮：active=高亮可点；false=置灰(未激活) */
|
|
export function PrimaryButton({ label, active = true, onPress, loading = false }: Props) {
|
|
return (
|
|
<Pressable
|
|
style={[styles.btn, active ? styles.btnActive : styles.btnDisabled]}
|
|
onPress={active && !loading ? onPress : undefined}
|
|
disabled={!active || loading}
|
|
>
|
|
{loading ? <ActivityIndicator color={colors.textInverse} /> : <Text style={styles.btnText}>{label}</Text>}
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
btn: { height: 50, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
|
|
// 按钮底色用 primaryBtn 而非 primary：白字对比 4.8:1 过 WCAG AA，
|
|
// primary 作白字底只有 3.64:1，不满足 AA（见 AGENTS.md 配色规范）
|
|
btnActive: { backgroundColor: colors.primaryBtn },
|
|
btnDisabled: { backgroundColor: colors.textDisabled },
|
|
btnText: { fontSize: 17, fontWeight: '700', color: colors.textInverse },
|
|
});
|
|
|