fix(Picker & DatePicker): 调整Picker & DatePicker 明暗主题

uiwjs · Apr 8, 2023 · a2d09e5 · a2d09e5
1 parent c1175dd
commit a2d09e5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 41 deletions.
diff --git a/example/examples/src/routes/DatePicker/index.tsx b/example/examples/src/routes/DatePicker/index.tsx
@@ -3,7 +3,7 @@ import {View, Text} from 'react-native';
 import {DatePicker, Button} from '@uiw/react-native';
 import {ComProps} from '../../routes';
 import Layout, {Container} from '../../Layout';
-const {Header, Body, Footer} = Layout;
+const {Header, Body, Footer, Card} = Layout;
 
 export interface BadgeViewProps extends ComProps {}
 
@@ -22,26 +22,23 @@ export default class BadgeView extends React.Component<BadgeViewProps> {
         <Layout>
           <Header title={title} description={description} />
           <Body scrollEnabled={false}>
-            <Button
-              onPress={() => {
-                this.setState({visible: true});
-              }}>
-              打开
-            </Button>
-            <View>
-              <Text>{this.state.formatDate}</Text>
-            </View>
-            <DatePicker
-              title="请选择日期"
-              mode="datetime"
-              format="YYYY-MM-DD HH:mm:ss"
-              visible={this.state.visible}
-              onClosed={() => this.setState({visible: false})}
-              value={this.state.value}
-              onChange={(value, formatDate) => {
-                this.setState({value: value, formatDate: formatDate});
-              }}
-            />
+            <Card title="基本使用">
+              <Button onPress={() => this.setState({visible: true})}>打开</Button>
+              <View>
+                <Text>{this.state.formatDate}</Text>
+              </View>
+              <DatePicker
+                title="请选择日期"
+                mode="datetime"
+                format="YYYY-MM-DD HH:mm:ss"
+                visible={this.state.visible}
+                onClosed={() => this.setState({visible: false})}
+                value={this.state.value}
+                onChange={(value, formatDate) => {
+                  this.setState({value: value, formatDate: formatDate});
+                }}
+              />
+            </Card>
           </Body>
           <Footer />
         </Layout>

diff --git a/example/examples/src/routes/Picker/index.tsx b/example/examples/src/routes/Picker/index.tsx
@@ -2,10 +2,16 @@ import React from 'react';
 import {SafeAreaView} from 'react-native';
 import {Picker, Button, Spacing} from '@uiw/react-native';
 import {ComProps} from '../../routes';
+import Layout, {Container} from '../../Layout';
+
+const {Header, Body, Card, Footer} = Layout;
 
 export interface PickerViewProps extends ComProps {}
 
 export default function (props: PickerViewProps) {
+  const {route} = props;
+  const description = route.params.description;
+  const title = route.params.title;
   const [value, setValue] = React.useState(['2', '22', '221']);
   const [value2, setValue2] = React.useState(['5']);
   const [visible, setVisible] = React.useState(false);
@@ -39,20 +45,28 @@ export default function (props: PickerViewProps) {
   ];
 
   return (
-    <SafeAreaView style={{flex: 1}}>
-      <Button onPress={() => setVisible(true)}>打开</Button>
-      <Picker
-        title="标题"
-        displayType="modal"
-        value={value}
-        onChange={(val: any) => setValue(val)}
-        visible={visible}
-        cols={3}
-        onClosed={() => setVisible(false)}
-        data={arr as any}
-      />
-      <Spacing />
-      <Picker cols={1} displayType="view" data={arr2 as any} value={value2} onChange={(val2: any) => setValue2(val2)} />
-    </SafeAreaView>
+    <Container>
+      <Layout>
+        <Body>
+          <Header title={title} description={description} />
+          <Card title="基本使用">
+            <Picker cols={1} displayType="view" data={arr2 as any} value={value2} onChange={(val2: any) => setValue2(val2)} />
+          </Card>
+          <Card title="弹框picker">
+            <Button onPress={() => setVisible(true)}>打开</Button>
+            <Picker
+              title="标题"
+              displayType="modal"
+              value={value}
+              onChange={(val: any) => setValue(val)}
+              visible={visible}
+              cols={3}
+              onClosed={() => setVisible(false)}
+              data={arr as any}
+            />
+          </Card>
+        </Body>
+      </Layout>
+    </Container>
   );
 }
diff --git a/packages/core/src/Picker/components/WheelPicker/WheelPickerItem.tsx b/packages/core/src/Picker/components/WheelPicker/WheelPickerItem.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { Animated, StyleSheet, Text } from 'react-native';
 import { WhellPickerItemProps } from './type';
+import { Theme } from '../.././../theme';
+import { useTheme } from '@shopify/restyle';
 
 const opacityFunction = (val: number) => 1 / (1 + Math.abs(val));
 const scaleFunction = (val: number) => 1 - 0.1 * Math.abs(val);
 const rotationFunction = (val: number) => 20 * val;
 
 function WheelPickerItem({ textStyle, style, visibleRest, height, option, index, currentIndex }: WhellPickerItemProps) {
   const relativeScrollIndex = Animated.subtract(index, currentIndex);
-
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   const inputRange = [0];
   for (let i = 1; i <= visibleRest + 1; i++) {
     inputRange.unshift(-i);
@@ -42,7 +45,7 @@ function WheelPickerItem({ textStyle, style, visibleRest, height, option, index,
 
   return (
     <Animated.View style={[styles.option, style, { height, opacity, transform: [{ rotateX }, { scale }] }]}>
-      <Text style={textStyle}>{option?.label}</Text>
+      <Text style={[{ color: textColor }, textStyle]}>{option?.label}</Text>
     </Animated.View>
   );
 }

diff --git a/packages/core/src/theme/index.ts b/packages/core/src/theme/index.ts
@@ -211,7 +211,7 @@ const darkPalette = {
   primary200: '#005DFF',
   primary300: 'rgba(0, 93, 255, 0.7)',
   primary400: 'rgba(0, 93, 255, 0.4)',
-  primary500: 'transparent',
+  primary500: '#0D0D0D', // 苹果暗模式背景色
   primary600: 'transparent',
   primary700: 'transparent',
   primary800: 'transparent',
@@ -226,15 +226,15 @@ const darkPalette = {
   gray500: 'rgba(255, 255, 255, 0.8)',
   gray600: 'rgba(0, 0, 0, 0.4)',
   gray700: 'rgba(0, 0, 0, 0.04)',
-  gray800: 'rgba(30, 30, 40, 0.7)',
+  gray800: 'rgba(30, 30, 40, 0.9)', // 苹果暗模式弹开颜色
   gray900: 'transparent',
 };
 
 const darkTheme: Theme = {
   ...lightTheme,
   colors: {
     ...darkPalette,
-    background: darkPalette.gray50,
+    background: darkPalette.primary500,
     mask: darkPalette.gray800,
     border: darkPalette.gray400,
     icon: darkPalette.gray300,