一、DrawerGroup （UI-Kitten ）

DrawerGroup 导航问题 xxx 这个问题没有解决

UI-Kitten Version@5.0.0
@ui-kitten/components DrawerGroup

const DrawerContent = ({ navigation, state }) => {

  const routes = [//1.定义对应的组件（组件名而非title名）数组
    ['Users'],
    ['Orders'],
    ['EvaDesign', 'News', 'Details']
  ];

  const [selectedIndex, setSelectedIndex] = React.useState(new IndexPath(0));//2.初始化选中状态

  return (
    //3.以index作为判断依据实现导航条件
    <Drawer
      selectedIndex={selectedIndex}
      onSelect={index => {
        setSelectedIndex(index)
        if (index.section != undefined) {
          let sectionRoute = routes[index.section][index.row];
          navigation.navigate(sectionRoute);
        } else if (index.section == undefined) {
          navigation.navigate(state.routeNames[index.row])
        }

      }}
    >
      <DrawerItem title='Users'/>
      <DrawerItem title='Orders'/>
      <DrawerGroup title='AkveoDesign'>
        <DrawerItem title='EvaDesign'/>
        <DrawerItem title='News'/>
        <DrawerItem title='Details'/>
      </DrawerGroup>
    </Drawer>
  )
};

二、自定义映射（UI-Kitten）

Step.1 创建映射

工程根目录新建 mapping.json 文件，

该配置文件稍后由Eva设计系统处理器处理，以提供组件所应用的最终样式。

//文本text样式
{
  "strict": {
    "text-font-family": "OpenSans-Regular",

    "text-heading-1-font-size": 36,
    "text-heading-1-font-weight": "800",
    "text-heading-1-font-family": "OpenSans-Bold",

    // Same for `h2...h6`

    "text-subtitle-1-font-size": 15,
    "text-subtitle-1-font-weight": "600",
    "text-subtitle-1-font-family": "OpenSans-SemiBold",
    // Same for `s2`

    "text-paragraph-1-font-size": 15,
    "text-paragraph-1-font-weight": "400",
    "text-paragraph-1-font-family": "OpenSans-Regular",
    // Same for `p2`

    "text-caption-1-font-size": 12,
    "text-caption-1-font-weight": "400",
    "text-caption-1-font-family": "OpenSans-Regular",
    // Same for `c2`

    "text-label-font-size": 12,
    "text-label-font-weight": "800",
    "text-label-font-family": "OpenSans-Bold"
  }
}

step.2 更改单个参数

为了更改默认参数，您需要找出它的声明位置（/node_modules/@eva-design/eva/mapping.json）。为此，我们可以快速浏览有关组件的元信息。

//文本text样式
{
  "strict": {
    "text-font-family": "OpenSans-Regular",

    - "text-heading-1-font-size": 36,
    + "text-heading-1-font-size": 66,

step.3 实现映射

metro.config.js中配置以下代码：

const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
++ customMappingPath: './path-to/mapping.json',
};

module.exports = MetroConfig.create(evaConfig, {
  // Whatever was previously specified
});

三、主题定制（UI-Kitten）

Step.1 Eva-Color

Eva-color中自定义配置颜色，export theme.json文件，放入工程中。

Step.2 App.js

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Button } from '@ui-kitten/components';
import { default as theme } from './theme.json'; // <-- Import app theme

export default () => (
  <ApplicationProvider {...eva} theme={{ ...eva.dark, ...theme }}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button>HOME</Button>
    </Layout>
  </ApplicationProvider>
);

四、使用第三方图标包（UI-Kitten）

Step.1 安装 vector-icons

npm install --save react-native-vector-icons

Step.2 配置（android）

// android/app/build.gradle文件中添加
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Step.3 创建图标适配器

// 创建一个feather-icons.js文件，并在其中放置以下代码。
import React from 'react';
import { StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

export const FeatherIconsPack = {
  name: 'feather',
  icons: createIconsMap(),
};

function createIconsMap() {
  return new Proxy({}, {
    get(target, name) {
      return IconProvider(name);
    },
  });
}

const IconProvider = (name) => ({
  toReactElement: (props) => FeatherIcon({ name, ...props }),
});

function FeatherIcon({ name, style }) {
  const { height, tintColor, ...iconStyle } = StyleSheet.flatten(style);
  return (
    <Icon name={name} size={height} color={tintColor} style={iconStyle} />
  );
}

Step.4 注册图标

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry, Layout, Text } from '@ui-kitten/components';
++ import { FeatherIconsPack } from './feather-icons';

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text category='h1'>HOME</Text>
  </Layout>
);

export default () => (
  <>
++  <IconRegistry icons={FeatherIconsPack} />
    <ApplicationProvider {...eva} theme={eva.light}>
      <HomeScreen />
    </ApplicationProvider>
  </>
);

Step.5 使用

import React from 'react';
import { Button, Icon } from '@ui-kitten/components';

export const FacebookIcon = (props) => (
  <Icon name='facebook' {...props} />
);

export const LoginButton = () => (
  <Button accessoryLeft={FacebookIcon}>Login with Facebook</Button>
);

五、Expo&UI-Kitten（web端报错的问题）

解决办法：

//1.安装
expo install @expo/webpack-config

//2.根目录新建`webpack.config.js`添加

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};