统一风格
This commit is contained in:
@@ -113,8 +113,10 @@ export default function SearchScreen() {
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const insets = useSafeAreaInsets();
|
const insets = useSafeAreaInsets();
|
||||||
const isDark = theme === "dark";
|
const isDark = theme === "dark";
|
||||||
|
const textColor = isDark ? "#FFFFFF" : "#000000";
|
||||||
const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
|
const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
|
||||||
const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
|
const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.1)";
|
||||||
|
const pageBg = isDark ? Colors.dark.background : "#f2f2f7";
|
||||||
const { state } = useAppState();
|
const { state } = useAppState();
|
||||||
|
|
||||||
const [searchType, setSearchType] = useState<SearchType>("all");
|
const [searchType, setSearchType] = useState<SearchType>("all");
|
||||||
@@ -485,7 +487,7 @@ export default function SearchScreen() {
|
|||||||
</View>
|
</View>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[
|
style={[
|
||||||
styles.iconBtn,
|
styles.sheetBtn,
|
||||||
{
|
{
|
||||||
backgroundColor: cardBg,
|
backgroundColor: cardBg,
|
||||||
borderColor: borderColor,
|
borderColor: borderColor,
|
||||||
@@ -688,49 +690,28 @@ export default function SearchScreen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemedView style={styles.container}>
|
<ThemedView style={[styles.container, { backgroundColor: pageBg }]}>
|
||||||
<Stack.Screen
|
<Stack.Screen
|
||||||
options={{
|
options={{
|
||||||
headerShown: false,
|
title: t("search.title"),
|
||||||
|
headerShown: true,
|
||||||
|
headerBackTitle: t("settings.back"),
|
||||||
|
// Ensure header matches theme to avoid white flash
|
||||||
|
headerStyle: {
|
||||||
|
backgroundColor: pageBg,
|
||||||
|
},
|
||||||
|
headerTintColor: textColor,
|
||||||
|
headerShadowVisible: false,
|
||||||
|
// Present the screen as a normal card and slide from right
|
||||||
|
presentation: "card",
|
||||||
animation: "slide_from_right",
|
animation: "slide_from_right",
|
||||||
|
// Set the scene/content background to match theme during transition
|
||||||
|
contentStyle: {
|
||||||
|
backgroundColor: pageBg,
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<BlurView
|
|
||||||
intensity={80}
|
|
||||||
tint={isDark ? "dark" : "light"}
|
|
||||||
style={[
|
|
||||||
styles.nav,
|
|
||||||
{
|
|
||||||
backgroundColor: cardBg,
|
|
||||||
},
|
|
||||||
{ paddingTop: insets.top + 10 },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={[
|
|
||||||
styles.iconBtn,
|
|
||||||
{
|
|
||||||
backgroundColor: cardBg,
|
|
||||||
borderColor: borderColor,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
onPress={() => router.back()}
|
|
||||||
>
|
|
||||||
<IconSymbol
|
|
||||||
name="chevron-back"
|
|
||||||
size={20}
|
|
||||||
color={isDark ? "rgba(255,255,255,0.9)" : "rgba(0,0,0,0.9)"}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<View style={styles.brand}>
|
|
||||||
<ThemedText style={styles.brandTitle}>{t("search.title")}</ThemedText>
|
|
||||||
<ThemedText style={styles.brandSub}>
|
|
||||||
{t("search.subtitle")}
|
|
||||||
</ThemedText>
|
|
||||||
</View>
|
|
||||||
</BlurView>
|
|
||||||
|
|
||||||
<View style={styles.content}>
|
<View style={styles.content}>
|
||||||
<View style={styles.contentContainer}>
|
<View style={styles.contentContainer}>
|
||||||
{renderSearchBar()}
|
{renderSearchBar()}
|
||||||
@@ -792,39 +773,6 @@ const styles = StyleSheet.create({
|
|||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
nav: {
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 10,
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
paddingBottom: 12,
|
|
||||||
position: "sticky",
|
|
||||||
top: 0,
|
|
||||||
zIndex: 40,
|
|
||||||
},
|
|
||||||
iconBtn: {
|
|
||||||
width: 38,
|
|
||||||
height: 38,
|
|
||||||
borderRadius: 14,
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
brand: {
|
|
||||||
flex: 1,
|
|
||||||
minWidth: 0,
|
|
||||||
gap: 2,
|
|
||||||
},
|
|
||||||
brandTitle: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: "700",
|
|
||||||
letterSpacing: 0.2,
|
|
||||||
},
|
|
||||||
brandSub: {
|
|
||||||
fontSize: 12,
|
|
||||||
opacity: 0.5,
|
|
||||||
fontWeight: "600",
|
|
||||||
},
|
|
||||||
content: {
|
content: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
@@ -862,7 +810,7 @@ const styles = StyleSheet.create({
|
|||||||
},
|
},
|
||||||
chip: {
|
chip: {
|
||||||
paddingHorizontal: 14,
|
paddingHorizontal: 14,
|
||||||
paddingVertical: 8,
|
paddingVertical: 6,
|
||||||
borderRadius: 999,
|
borderRadius: 999,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
},
|
},
|
||||||
@@ -920,14 +868,14 @@ const styles = StyleSheet.create({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: 12,
|
gap: 12,
|
||||||
padding: 12,
|
padding: 12,
|
||||||
borderRadius: 18,
|
borderRadius: 10,
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
},
|
},
|
||||||
logoDot: {
|
logoDot: {
|
||||||
width: 34,
|
width: 34,
|
||||||
height: 34,
|
height: 34,
|
||||||
borderRadius: 14,
|
borderRadius: 8,
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
|
|||||||
Reference in New Issue
Block a user