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

网络 02-07 5155

[快速上手RN] 1. React native 项目集成UI Kitten 系列教程1.安装ui kitten2.配置App.js

系列教程

[快速上手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后使用了