deps: 增加restyle用来统一ui样式

uiwjs · Mar 31, 2023 · 489a29e · 489a29e
1 parent 5952e64
commit 489a29e
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 41 deletions.
diff --git a/example/examples/src/App.tsx b/example/examples/src/App.tsx
@@ -3,6 +3,7 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator} from '@react-navigation/stack';
 import {SafeAreaView, StatusBar, StyleSheet} from 'react-native';
 import {RootSiblingParent} from 'react-native-root-siblings';
+import {ThemeProvider} from '@uiw/react-native';
 
 import {stackPageData} from './routes';
 
@@ -19,31 +20,33 @@ const App = () => {
     <RootSiblingParent>
       <SafeAreaView style={styles.block}>
         <StatusBar barStyle="dark-content" />
-        <NavigationContainer>
-          <Stack.Navigator initialRouteName="Home">
-            <Stack.Screen
-              name="Home"
-              component={require('./Home').default}
-              options={{
-                headerTitle: 'Home',
-                // header: () => null,
-              }}
-            />
-            {stackPageData.map((props: any, index: number) => {
-              return (
-                <Stack.Screen
-                  key={index}
-                  {...props}
-                  // name="Home"
-                  // options={{
-                  //   header: () => null
-                  // }}
-                  // component={Home}
-                />
-              );
-            })}
-          </Stack.Navigator>
-        </NavigationContainer>
+        <ThemeProvider>
+          <NavigationContainer>
+            <Stack.Navigator initialRouteName="Home">
+              <Stack.Screen
+                name="Home"
+                component={require('./Home').default}
+                options={{
+                  headerTitle: 'Home',
+                  // header: () => null,
+                }}
+              />
+              {stackPageData.map((props: any, index: number) => {
+                return (
+                  <Stack.Screen
+                    key={index}
+                    {...props}
+                    // name="Home"
+                    // options={{
+                    //   header: () => null
+                    // }}
+                    // component={Home}
+                  />
+                );
+              })}
+            </Stack.Navigator>
+          </NavigationContainer>
+        </ThemeProvider>
       </SafeAreaView>
     </RootSiblingParent>
   );

diff --git a/example/examples/src/routes/ActionBar/index.tsx b/example/examples/src/routes/ActionBar/index.tsx
@@ -18,7 +18,7 @@ export default class ActionBarDemo extends React.Component<ActionBarProps> {
         <View style={{flex: 1}}>
           <ActionBar
             scroll={false}
-            backgroundColor="#5847FF"
+            // backgroundColor="#5847FF"
             actions={[
               {
                 label: 'Delete',

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -63,7 +63,8 @@
     "prop-types": "15.7.2",
     "react-native-gesture-handler": "2.8.0",
     "react-native-root-siblings": "4.1.1",
-    "react-native-svg": "12.1.1"
+    "react-native-svg": "12.1.1",
+    "@shopify/restyle":"~2.4.2"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

diff --git a/packages/core/src/ActionBar/index.tsx b/packages/core/src/ActionBar/index.tsx
@@ -20,6 +20,8 @@ import {
 import { useSetState } from 'ahooks';
 import RnText from '../Typography/RnText';
 import { last } from '../utils/utils';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
 
 export interface ActionBarActionsProps {
   label?: string;
@@ -39,18 +41,20 @@ export type ActionBarProps = {
   focusIndex?: number;
 };
 
-function ActionBar({
-  actions = [],
-  style,
-  keepAbsoulte = true,
-  height = 48,
-  backgroundColor = '#fff',
-  scroll = false,
-  useSafeArea = true,
-  focusIndex = 0,
-}: ActionBarProps) {
+function ActionBar(props: ActionBarProps) {
   const ios = Platform.OS === 'ios';
   const baseRef: any = useRef();
+  const theme = useTheme<Theme>();
+  const {
+    actions = [],
+    style,
+    keepAbsoulte = true,
+    height = 48,
+    backgroundColor = theme.colors.primary_background,
+    scroll = false,
+    useSafeArea = true,
+    focusIndex = 0,
+  } = props;
 
   const [state, setState] = useSetState<any>({
     itemsLayouts: {}, // items/layout
@@ -66,7 +70,11 @@ function ActionBar({
 
   const Component: any = scroll ? ScrollView : useSafeArea && ios ? SafeAreaView : View;
 
-  const styles = createStyles({ height: height, backgroundColor: backgroundColor });
+  const styles = createStyles({
+    height: height,
+    backgroundColor: backgroundColor,
+    shadowColor: theme.colors.gray300,
+  });
 
   useEffect(() => {
     scroll && onFocusIndex(focusIndex);
@@ -176,7 +184,7 @@ function ActionBar({
           style={{
             width: 76,
             height: heightToUse,
-            tintColor: '#fff',
+            tintColor: theme.colors.white,
             transform: imageTransform,
           }}
           resizeMode="stretch"
@@ -228,7 +236,13 @@ function ActionBar({
   );
 }
 
-function createStyles({ height, backgroundColor }: any) {
+type CreStyle = {
+  height: number;
+  backgroundColor: string;
+  shadowColor: string;
+};
+
+function createStyles({ height, backgroundColor, shadowColor }: CreStyle) {
   return StyleSheet.create({
     container: {
       height,
@@ -239,7 +253,7 @@ function createStyles({ height, backgroundColor }: any) {
       ...StyleSheet.absoluteFillObject,
       top: undefined,
       backgroundColor,
-      shadowColor: '#43515C',
+      shadowColor: shadowColor,
       shadowOpacity: 0.06,
       shadowRadius: 18.5,
     },

diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -1,3 +1,6 @@
+import theme from './theme';
+import ThemeProvider from './theme-provider';
+
 export { default as Avatar } from './Avatar';
 export * from './Avatar';
 export { default as Badge } from './Badge';
@@ -154,3 +157,5 @@ export * from './Typography/Div';
 export * from './Typography/Hr';
 export * from './Typography/Em';
 export * from './Typography/RnText';
+
+export { theme, ThemeProvider };
diff --git a/packages/core/src/theme-provider/index.tsx b/packages/core/src/theme-provider/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { ThemeProvider as ShopifyThemeProvider } from '@shopify/restyle';
+import theme, { Theme } from '../theme';
+
+const { lightTheme } = theme;
+const ThemeProvider: FC<
+  PropsWithChildren<{
+    theme?: Theme;
+  }>
+> = ({ theme = lightTheme, children }) => {
+  return <ShopifyThemeProvider theme={theme}>{children}</ShopifyThemeProvider>;
+};
+ThemeProvider.displayName = 'ThemeProvider';
+
+export default ThemeProvider;