[快速上手RN] 1. React native 项目集成UI Kitten

系列教程

[快速上手RN] 0.React Native 快速启动项目
[快速上手RN] 1. React native 项目集成UI Kitten
[快速上手RN] 2. React native 项目色彩主题色编辑及使用
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
[快速上手RN] 4. React native 集成redux

如果还未了解如何快速启动React Native，那么不妨先去看下[快速上手RN] 0.React Native 快速启动项目

1.安装ui kitten

执行

npm i @ui-kitten/components @eva-design/eva react-native-svg

// 使用yarn的话执行以下
// yarn add @ui-kitten/components @eva-design/eva react-native-svg

如果使用了expo,那么需要以下命令来安装svg软件包
expo install react-native-svg@9.13.6

2.配置App.js

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, Layout, Text } from '@ui-kitten/components';

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

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

如果你已经有了自己的视图，那么将HomeScreen部分删除，并将该Provider内替换为你的视图组件或导航组件

大功告成！这时已经将ui kitten集成到了项目中，可以参照官方文档的组件进行import后使用了