feat: 添加icon 主题&主题文档

README.md

@@ -2,6 +2,25 @@
 
 在项目根目录中运行`npm i`安装代码需要对应依赖，再进入对应 package 运行项目
 
+### 目录结构
+
+.
+├── CHANGELOG.md          
+├── DEVELOP_GUIDE.md
+├── README.md
+├── babel.config.js
+├── example               // demo运行目录
+├── jest-setup.js
+├── jest.config.js
+├── node_modules
+├── package-lock.json
+├── package.json
+├── scripts
+├── site                  // 文档站点目录
+├── src                   // 组件库源码
+├── tsconfig.json
+└── tsconfig.test.json
+
 ### 运行命令
 
 
@@ -26,3 +45,5 @@ subject-描述
 1. feat(button): 修改文案
 2. fix: fixbug
 3. refactor: 调整代码结构
+
+### 文档地址

example/src/App.tsx

@@ -5,9 +5,8 @@ import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator, DrawerContentScrollView, useDrawerProgress } from '@react-navigation/drawer';
 import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack';
 import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
-import { useTheme } from '@src/theme';
+import { ThemeProvider, useTheme } from '@src/theme';
 import { Text, ScrollView, View, Button } from '@src/components';
-import ThemeProvider from '@src/theme/ThemeProvider';
 import { SafeAreaProvider, initialWindowMetrics, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { lazy, useCallback, Suspense } from 'react';
 import { ListItem } from './components/ListItem';
@@ -76,6 +75,7 @@ function DrawerMenu(props: any) {
         /> */}
         <View className="mx12">
           <Button
+            loading
             theme="primary"
             content="change theme"
             onPress={() => {
@@ -110,14 +110,25 @@ function App(): JSX.Element {
           colors: {
             fontGray2: 'red',
           },
+          classnames: {
+            test: {
+              backgroundColor: 'red',
+            },
+          },
         },
       }}
       theme="light"
     >
       <GestureHandlerRootView style={{ flex: 1 }}>
         <SafeAreaProvider initialMetrics={initialWindowMetrics}>
           <NavigationContainer>
-            <Suspense fallback={<Text>loading...</Text>}>
+            <Suspense
+              fallback={
+                <View className="flex1 flexCenter">
+                  <Text>loading...</Text>
+                </View>
+              }
+            >
               <Stack.Navigator
                 initialRouteName="ExampleList"
                 screenOptions={{

site/web/site.config.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-relative-packages */
-import baseConfig from '@example/base-config.ts';
+import baseConfig from '@example/component-list.ts';
 
 const componentConfig = baseConfig.map((config) => {
   const result = {
@@ -46,6 +46,18 @@ const siteConfig = {
         },
       ],
     },
+    {
+      title: '全局配置',
+      type: 'config',
+      children: [
+        {
+          title: '主题',
+          name: 'theme',
+          path: '/react-native/theme',
+          component: () => import('tdesign-react-native/theme/theme.md'),
+        },
+      ],
+    },
     ...componentConfig,
     // {
     //   title: '基础组件',

src/components/Button/index.tsx

@@ -8,6 +8,7 @@ import Animated, {
   Easing,
   cancelAnimation,
 } from 'react-native-reanimated';
+import { LoadingIcon } from 'tdesign-icons-react-native/src';
 import { useTheme, ThemeType } from '../../theme';
 import { Text, View } from '../Base';
 import { Touchable } from '../Touchable';
@@ -200,7 +201,7 @@ export const Button = (props: IButtonProps) => {
   const loadingNode = (
     <View style={_iconStyle}>
       <Animated.View style={animatedStyle}>
-        <Text>loading</Text>
+        <LoadingIcon color={_iconColor} />
       </Animated.View>
     </View>
   );

src/theme/theme.md

@@ -0,0 +1,69 @@
+---
+title: 主题配置
+spline: explain
+---
+
+### 使用主题
+
+在根组件外层添加`ThemeProvider`组件，在需要使用主题的组件中使用`useTheme`hook，获取到主题，使用对应token即可。
+
+```js
+import { ThemeProvider } from '@src/theme';
+
+function App() {
+    return (
+        <ThemeProvider>
+            <Root/>
+        </ThemeProvider>
+    )
+}
+
+import { useTheme } from '@src/theme';
+function Root() {
+    const { theme } = useTheme();
+    return <Text style={{color: theme.colors.fontGray1}}>测试</Text>
+}
+```
+
+### 使用className
+
+组件提供类似`Tailwind CSS`的便捷样式功能，需要配合组件库提供的View、Text等组件共同使用。可以查看`tdesign-react-native/src/theme/light/classnames.ts`支持哪些样式。
+
+```js
+import { Text, ScrollView, View, Button } from '@src/components';
+
+function Demo() {
+    return <View className="bg mt12">
+        <Text className="text4">测试</Text>
+    </View>
+}
+
+```
+
+### 自定义样式
+
+`ThemeProvider`组件接收`config`参数可以配置一些自定义样式或覆盖已有样式。
+
+```js
+<ThemeProvider config={{
+    light: {
+        // 覆盖样式
+        colors: {
+            fontGray2: 'red',
+        },
+        classnames: {
+            // 自定义样式
+            testBg: {
+                backgroundColor: 'red',
+            },
+        },
+    },
+    }}
+></ThemeProvider>
+
+function Demo() {
+    return <View className="testBg">
+        <Text className="fontGray2">测试</Text>
+    </View>
+}
+```