Refactor components to use StyledButton for consistent button styling

- Replaced custom button implementations with StyledButton in various components including DetailScreen, HomeScreen, SearchScreen, and SettingsModal. - Updated button styles and behaviors to align with the new StyledButton component. - Removed the obsolete DetailButton component to streamline the codebase.
2026-03-13 15:57:31 +08:00 · 2025-07-08 17:24:55 +08:00
parent 9f721c22d5
commit 504f12067b
11 changed files with 395 additions and 366 deletions
--- a/components/DetailButton.tsx
+++ b/components/DetailButton.tsx
@@ -1,55 +0,0 @@
-import React from "react";
-import {
-  Pressable,
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  PressableProps,
-} from "react-native";
-
-interface DetailButtonProps extends PressableProps {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-export const DetailButton: React.FC<DetailButtonProps> = ({
-  children,
-  style,
-  ...rest
-}) => {
-  return (
-    <Pressable
-      style={({ focused }) => [
-        styles.button,
-        style,
-        focused && styles.buttonFocused,
-      ]}
-      {...rest}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: "#333",
-    paddingHorizontal: 15,
-    paddingVertical: 10,
-    borderRadius: 8,
-    margin: 5,
-    borderWidth: 2,
-    borderColor: "transparent",
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  buttonFocused: {
-    backgroundColor: "#0056b3",
-    borderColor: "#fff",
-    elevation: 5,
-    shadowColor: "#fff",
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 1,
-    shadowRadius: 15,
-  },
-});
--- a/components/EpisodeSelectionModal.tsx
+++ b/components/EpisodeSelectionModal.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { View, Text, StyleSheet, Modal, FlatList, Pressable, TouchableOpacity } from 'react-native';
-
-import usePlayerStore from '@/stores/playerStore';
-import { useState } from 'react';
+import React from "react";
+import { View, Text, StyleSheet, Modal, FlatList, Pressable } from "react-native";
+import { StyledButton } from "./StyledButton";
+import usePlayerStore from "@/stores/playerStore";
+import { useState } from "react";

 interface Episode {
  title?: string;
@@ -35,21 +35,18 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
          {episodes.length > episodeGroupSize && (
            <View style={styles.episodeGroupContainer}>
              {Array.from({ length: Math.ceil(episodes.length / episodeGroupSize) }, (_, groupIndex) => (
-                <TouchableOpacity
+                <StyledButton
                  key={groupIndex}
-                  style={[
-                    styles.episodeGroupButton,
-                    selectedEpisodeGroup === groupIndex && styles.episodeGroupButtonSelected,
-                  ]}
+                  text={`${groupIndex * episodeGroupSize + 1}-${Math.min(
+                    (groupIndex + 1) * episodeGroupSize,
+                    episodes.length
+                  )}`}
                  onPress={() => setSelectedEpisodeGroup(groupIndex)}
-                >
-                  <Text style={styles.episodeGroupButtonText}>
-                    {`${groupIndex * episodeGroupSize + 1}-${Math.min(
-                      (groupIndex + 1) * episodeGroupSize,
-                      episodes.length
-                    )}`}
-                  </Text>
-                </TouchableOpacity>
+                  isSelected={selectedEpisodeGroup === groupIndex}
+                  style={styles.episodeGroupButton}
+                  textStyle={styles.episodeGroupButtonText}
+                  variant="primary"
+                />
              ))}
            </View>
          )}
@@ -63,24 +60,19 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
            renderItem={({ item, index }) => {
              const absoluteIndex = selectedEpisodeGroup * episodeGroupSize + index;
              return (
-                <Pressable
-                  style={({ focused }) => [
-                    styles.episodeItem,
-                    currentEpisodeIndex === absoluteIndex && styles.episodeItemSelected,
-                    focused && styles.focusedButton,
-                  ]}
+                <StyledButton
+                  text={item.title || `第 ${absoluteIndex + 1} 集`}
                  onPress={() => onSelectEpisode(absoluteIndex)}
+                  isSelected={currentEpisodeIndex === absoluteIndex}
                  hasTVPreferredFocus={currentEpisodeIndex === absoluteIndex}
-                >
-                  <Text style={styles.episodeItemText}>{item.title || `第 ${absoluteIndex + 1} 集`}</Text>
-                </Pressable>
+                  style={styles.episodeItem}
+                  textStyle={styles.episodeItemText}
+                />
              );
            }}
          />

-          <Pressable style={({ focused }) => [styles.closeButton, focused && styles.focusedButton]} onPress={onClose}>
-            <Text style={{ color: 'white' }}>关闭</Text>
-          </Pressable>
+          <StyledButton text="关闭" onPress={onClose} style={styles.closeButton} />
        </View>
      </View>
    </Modal>
@@ -90,69 +82,49 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
 const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    backgroundColor: 'transparent',
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    backgroundColor: "transparent",
  },
  modalContent: {
    width: 400,
-    height: '100%',
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.85)",
    padding: 20,
  },
  modalTitle: {
-    color: 'white',
+    color: "white",
    marginBottom: 20,
-    textAlign: 'center',
+    textAlign: "center",
    fontSize: 18,
-    fontWeight: 'bold',
+    fontWeight: "bold",
  },
  episodeItem: {
-    backgroundColor: '#333',
    paddingVertical: 12,
-    borderRadius: 8,
    margin: 4,
    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  episodeItemSelected: {
-    backgroundColor: '#007bff',
  },
  episodeItemText: {
-    color: 'white',
    fontSize: 14,
  },
  episodeGroupContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "center",
    marginBottom: 15,
    paddingHorizontal: 10,
  },
  episodeGroupButton: {
-    backgroundColor: '#444',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 15,
    margin: 5,
  },
-  episodeGroupButtonSelected: {
-    backgroundColor: '#007bff',
-  },
  episodeGroupButtonText: {
-    color: 'white',
    fontSize: 12,
  },
  closeButton: {
-    backgroundColor: '#333',
    padding: 15,
-    borderRadius: 8,
-    alignItems: 'center',
    marginTop: 20,
  },
-  focusedButton: {
-    backgroundColor: 'rgba(119, 119, 119, 0.9)',
-    transform: [{ scale: 1.1 }],
-  },
 });
--- a/components/MediaButton.tsx
+++ b/components/MediaButton.tsx
@@ -1,53 +1,16 @@
-import React from "react";
-import { Pressable, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import React, { ComponentProps } from "react";
+import { StyledButton } from "./StyledButton";
+import { StyleSheet } from "react-native";

-interface MediaButtonProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  isDisabled?: boolean;
-  hasTVPreferredFocus?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
+type StyledButtonProps = ComponentProps<typeof StyledButton>;

-export const MediaButton: React.FC<MediaButtonProps> = ({
-  onPress,
-  children,
-  isDisabled = false,
-  hasTVPreferredFocus = false,
-  style,
-}) => {
-  return (
-    <Pressable
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      onPress={onPress}
-      disabled={isDisabled}
-      style={({ focused }) => [
-        styles.mediaControlButton,
-        focused && styles.focusedButton,
-        isDisabled && styles.disabledButton,
-        style,
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-};
+export const MediaButton = (props: StyledButtonProps) => (
+  <StyledButton {...props} style={[styles.mediaControlButton, props.style]} variant="ghost" />
+);

 const styles = StyleSheet.create({
  mediaControlButton: {
-    backgroundColor: "rgba(51, 51, 51, 0.8)",
    padding: 12,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
    minWidth: 80,
-    margin: 5,
-  },
-  focusedButton: {
-    backgroundColor: "rgba(119, 119, 119, 0.9)",
-    transform: [{ scale: 1.1 }],
-  },
-  disabledButton: {
-    opacity: 0.5,
  },
 });
--- a/components/NextEpisodeOverlay.tsx
+++ b/components/NextEpisodeOverlay.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
+import { StyledButton } from "./StyledButton";

 interface NextEpisodeOverlayProps {
  visible: boolean;
  onCancel: () => void;
 }

-export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
-  visible,
-  onCancel,
-}) => {
+export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({ visible, onCancel }) => {
  if (!visible) {
    return null;
  }
@@ -18,12 +16,13 @@ export const NextEpisodeOverlay: React.FC<NextEpisodeOverlayProps> = ({
  return (
    <View style={styles.nextEpisodeOverlay}>
      <View style={styles.nextEpisodeContent}>
-        <ThemedText style={styles.nextEpisodeTitle}>
-          即将播放下一集...
-        </ThemedText>
-        <TouchableOpacity style={styles.nextEpisodeButton} onPress={onCancel}>
-          <ThemedText style={styles.nextEpisodeButtonText}>取消</ThemedText>
-        </TouchableOpacity>
+        <ThemedText style={styles.nextEpisodeTitle}>即将播放下一集...</ThemedText>
+        <StyledButton
+          text="取消"
+          onPress={onCancel}
+          style={styles.nextEpisodeButton}
+          textStyle={styles.nextEpisodeButtonText}
+        />
      </View>
    </View>
  );
@@ -48,10 +47,8 @@ const styles = StyleSheet.create({
    marginBottom: 10,
  },
  nextEpisodeButton: {
-    backgroundColor: "#333",
    padding: 8,
    paddingHorizontal: 15,
-    borderRadius: 5,
  },
  nextEpisodeButtonText: {
    fontSize: 14,
--- a/components/PlayerControls.tsx
+++ b/components/PlayerControls.tsx
@@ -88,7 +88,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({ showControls, se
            )}
          </MediaButton>

-          <MediaButton onPress={onPlayNextEpisode} isDisabled={!hasNextEpisode}>
+          <MediaButton onPress={onPlayNextEpisode} disabled={!hasNextEpisode}>
            <SkipForward color={hasNextEpisode ? "white" : "#666"} size={24} />
          </MediaButton>

--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,8 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Modal, View, Text, TextInput, StyleSheet, Pressable, useColorScheme } from 'react-native';
-import { ThemedText } from './ThemedText';
-import { ThemedView } from './ThemedView';
-import { useSettingsStore } from '@/stores/settingsStore';
+import React, { useState, useEffect, useRef } from "react";
+import { Modal, View, Text, TextInput, StyleSheet, useColorScheme } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { ThemedView } from "./ThemedView";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { StyledButton } from "./StyledButton";

 export const SettingsModal: React.FC = () => {
  const { isModalVisible, hideModal, apiBaseUrl, setApiBaseUrl, saveSettings, loadSettings } = useSettingsStore();
@@ -28,12 +29,12 @@ export const SettingsModal: React.FC = () => {
  const styles = StyleSheet.create({
    modalContainer: {
      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(0, 0, 0, 0.6)",
    },
    modalContent: {
-      width: '80%',
+      width: "80%",
      maxWidth: 500,
      padding: 24,
      borderRadius: 12,
@@ -41,9 +42,9 @@ export const SettingsModal: React.FC = () => {
    },
    title: {
      fontSize: 24,
-      fontWeight: 'bold',
+      fontWeight: "bold",
      marginBottom: 20,
-      textAlign: 'center',
+      textAlign: "center",
    },
    input: {
      height: 50,
@@ -52,47 +53,28 @@ export const SettingsModal: React.FC = () => {
      paddingHorizontal: 15,
      fontSize: 16,
      marginBottom: 24,
-      backgroundColor: colorScheme === 'dark' ? '#3a3a3c' : '#f0f0f0',
-      color: colorScheme === 'dark' ? 'white' : 'black',
-      borderColor: 'transparent',
+      backgroundColor: colorScheme === "dark" ? "#3a3a3c" : "#f0f0f0",
+      color: colorScheme === "dark" ? "white" : "black",
+      borderColor: "transparent",
    },
    inputFocused: {
-      borderColor: '#007AFF',
-      shadowColor: '#007AFF',
+      borderColor: "#007AFF",
+      shadowColor: "#007AFF",
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.8,
      shadowRadius: 10,
      elevation: 5,
    },
    buttonContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-around',
+      flexDirection: "row",
+      justifyContent: "space-around",
    },
    button: {
      flex: 1,
-      paddingVertical: 12,
-      borderRadius: 8,
-      alignItems: 'center',
      marginHorizontal: 8,
    },
-    buttonSave: {
-      backgroundColor: '#007AFF',
-    },
-    buttonCancel: {
-      backgroundColor: colorScheme === 'dark' ? '#444' : '#ccc',
-    },
    buttonText: {
-      color: 'white',
      fontSize: 18,
-      fontWeight: '500',
-    },
-    focusedButton: {
-      transform: [{ scale: 1.05 }],
-      shadowColor: '#000',
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 5,
-      elevation: 8,
    },
  });

@@ -107,25 +89,27 @@ export const SettingsModal: React.FC = () => {
            value={apiBaseUrl}
            onChangeText={setApiBaseUrl}
            placeholder="输入 API 地址"
-            placeholderTextColor={colorScheme === 'dark' ? '#888' : '#555'}
+            placeholderTextColor={colorScheme === "dark" ? "#888" : "#555"}
            autoCapitalize="none"
            autoCorrect={false}
            onFocus={() => setIsInputFocused(true)}
            onBlur={() => setIsInputFocused(false)}
          />
          <View style={styles.buttonContainer}>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonCancel, focused && styles.focusedButton]}
+            <StyledButton
+              text="取消"
              onPress={hideModal}
-            >
-              <Text style={styles.buttonText}>取消</Text>
-            </Pressable>
-            <Pressable
-              style={({ focused }) => [styles.button, styles.buttonSave, focused && styles.focusedButton]}
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="default"
+            />
+            <StyledButton
+              text="保存"
              onPress={handleSave}
-            >
-              <Text style={styles.buttonText}>保存</Text>
-            </Pressable>
+              style={styles.button}
+              textStyle={styles.buttonText}
+              variant="primary"
+            />
          </View>
        </ThemedView>
      </View>
--- a/components/StyledButton.tsx
+++ b/components/StyledButton.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { Pressable, StyleSheet, StyleProp, ViewStyle, PressableProps, TextStyle, useColorScheme } from "react-native";
+import { ThemedText } from "./ThemedText";
+import { Colors } from "@/constants/Colors";
+
+interface StyledButtonProps extends PressableProps {
+  children?: React.ReactNode;
+  text?: string;
+  variant?: "default" | "primary" | "ghost";
+  isSelected?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const StyledButton: React.FC<StyledButtonProps> = ({
+  children,
+  text,
+  variant = "default",
+  isSelected = false,
+  style,
+  textStyle,
+  ...rest
+}) => {
+  const colorScheme = useColorScheme() ?? "light";
+  const colors = Colors[colorScheme];
+
+  const variantStyles = {
+    default: StyleSheet.create({
+      button: {
+        backgroundColor: colors.border,
+      },
+      text: {
+        color: colors.text,
+      },
+      selectedButton: {
+        backgroundColor: colors.tint,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedText: {
+        color: Colors.dark.text,
+      },
+    }),
+    primary: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: colors.link,
+        borderColor: colors.background,
+      },
+      selectedButton: {
+        backgroundColor: "rgba(0, 122, 255, 0.3)",
+        transform: [{ scale: 1.1 }],
+      },
+      selectedText: {
+        color: colors.link,
+      },
+    }),
+    ghost: StyleSheet.create({
+      button: {
+        backgroundColor: "transparent",
+      },
+      text: {
+        color: colors.text,
+      },
+      focusedButton: {
+        backgroundColor: "rgba(119, 119, 119, 0.9)",
+      },
+      selectedButton: {},
+      selectedText: {},
+    }),
+  };
+
+  const styles = StyleSheet.create({
+    button: {
+      paddingHorizontal: 15,
+      paddingVertical: 10,
+      borderRadius: 8,
+      margin: 5,
+      borderWidth: 2,
+      borderColor: "transparent",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    focusedButton: {
+      backgroundColor: colors.link,
+      borderColor: colors.background,
+      transform: [{ scale: 1.1 }],
+      elevation: 5,
+      shadowColor: colors.link,
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 1,
+      shadowRadius: 15,
+    },
+    selectedButton: {
+      backgroundColor: colors.tint,
+    },
+    text: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: colors.text,
+    },
+    selectedText: {
+      color: Colors.dark.text,
+    },
+  });
+
+  return (
+    <Pressable
+      style={({ focused }) => [
+        styles.button,
+        variantStyles[variant].button,
+        isSelected && (variantStyles[variant].selectedButton ?? styles.selectedButton),
+        focused && (variantStyles[variant].focusedButton ?? styles.focusedButton),
+        style,
+      ]}
+      {...rest}
+    >
+      {text ? (
+        <ThemedText
+          style={[
+            styles.text,
+            variantStyles[variant].text,
+            isSelected && (variantStyles[variant].selectedText ?? styles.selectedText),
+            textStyle,
+          ]}
+        >
+          {text}
+        </ThemedText>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+};