Merge pull request #535 from panbibi/dev

doc:添加菜单路由管理文档

Author: ChenlingasMx

website/src/pages/docs/react-native-template/menu-route/README.md

@@ -0,0 +1,107 @@
+# 菜单路由管理
+
+在项目根目录的`src / routes`配置菜单路由
+## 配置路由
+
+```js
+import React from 'react';
+import {Icon} from '@uiw/react-native';
+import MyHome from '../pages/MyHome';
+import OrderHome from '../pages/OrderHome';
+import TransportHome from '../pages/TransportHome';
+
+export default [
+  {
+    name: 'TransportHome',
+    component: TransportHome,
+    options: {
+      title: '发货',
+      tabBarIcon: () => {
+        return <Icon name="inbox" size={22} />;
+      },
+    },
+  },
+  {
+    name: 'OrderHome',
+    component: OrderHome,
+    options: {
+      title: '订单',
+      tabBarIcon: () => {
+        return <Icon name="file-text" size={22} />;
+      },
+    },
+  },
+  {
+    name: 'MyHome',
+    component: MyHome,
+    options: {
+      title: '我的',
+      tabBarIcon: () => {
+        return <Icon name="user" size={22} />;
+      },
+    },
+  },
+];
+
+```
+
+
+## Options
+
+### title
+
+可以用作headerTitle的回退的字符串
+
+### headerShown
+
+ 是否显示或隐藏屏幕的标头。默认情况下显示头部。将此设置为false会隐藏标头。
+
+### headerTintColor
+
+为标题着色。更改后退按钮和标题的颜色。
+
+### cardStyle
+
+堆栈中卡片的样式对象。您可以在此处提供自定义背景色来代替默认背景色
+
+### headerBackTitle
+
+iOS上后退按钮使用的标题字符串。默认为前一个场景的headerTitle
+
+路由配置完成后，访问页面即可看到效果，如需要配置 `title`，`tabBarIcon`，`header`等更多设置可以在这里找到[React Navigation](https://reactnavigation.org/docs/stack-navigator/)
+
+## 路由跳转
+
+```js
+import {View} from 'react-native';
+import { List, Icon} from '@uiw/react-native';
+
+        <List
+            flat={true}
+            data={[
+              {title: '企业开票'},
+              {title: '我的熟车'},
+              {title: '设置', onPress: () => navigation.navigate('MyHomeSetting')},
+              {title: '退出登录', onPress: () => navigation.replace('SignIn')},
+            ]}
+            renderItem={({item, index}) => {
+              return (
+                <List.Item
+                  key={index}
+                  extra={<Icon name="right" fill="#abb0b5" size={14} />}
+                  size="large"
+                  paddingLeft={15}
+                  style={{borderBottomWidth: 0}}
+                  onPress={item.onPress || null}>
+                  <View>
+                    <Text>{item.title}</Text>
+                  </View>
+                </List.Item>
+              );
+            }}
+          />
+```
+
+
+
+

website/src/pages/docs/react-native-template/menu-route/index.tsx

@@ -0,0 +1,18 @@
+import Preview from 'src/component/Preview';
+import md from './README.md';
+
+const transformImageUri = (url: string) => {
+  const reqImage = (require as any).context!('./', true, /\.(png|gif|jpg|svg)$/);
+  const urlAddr = reqImage(url);
+  return urlAddr;
+};
+
+const DEMO = () => (
+  <Preview
+    {...md}
+    transformImageUri={transformImageUri}
+    path="website/src/pages/docs/react-native-template/menu-route/README.md"
+  />
+);
+
+export default DEMO;

website/src/routes/menus.ts

@@ -88,6 +88,7 @@ export const docsMenus: MenuData[] = [
   { path: '/docs/unpack/android', name: 'Android(Mac) 打包' },
   { divider: true, name: 'React Native Template' },
   { path: '/docs/react-native-template/quickstart', name: '快速开始' },
+  { path: '/docs/react-native-template/menu-route', name: '菜单路由管理' },
   { path: '/docs/react-native-template/new-page', name: '新增页面' },
   { path: '/docs/react-native-template/mock-data', name: 'Mock 数据' },
   { path: '/docs/react-native-template/log-management', name: '日志管理' },

website/src/routes/router.tsx

@@ -65,6 +65,10 @@ export const routeData = [
         path: '/docs/react-native-template/quickstart',
         component: lazy(() => import('../pages/docs/react-native-template/quickstart')),
       },
+      {
+        path: '/docs/react-native-template/menu-route',
+        component: lazy(() => import('../pages/docs/react-native-template/menu-route')),
+      },
       {
         path: '/docs/react-native-template/new-page',
         component: lazy(() => import('../pages/docs/react-native-template/new-page')),