在查看expo
文档的时候,发现它推荐了好几款组件库,我全部查看了一遍后,觉得NativeBase
是比较好用的,且一直都在维护中,所以决定引入查看效果
https://docs.expo.dev/ui-programming/user-interface-libraries/
安装
NativeBase官方文档 我项目是用expo
搭建的
安装NativeBase
及其依赖,也可根据自己的项目来安装插件安装
yarn add native-base
npx expo install react-native-svg@12.1.1
npx expo install react-native-safe-area-context@3.3.2
使用
在项目App.js
中安装需要进行全局配置
import AppNavigation from "./src/navigation/appNavigation"
import { extendTheme, NativeBaseProvider } from "native-base"
export default () => {
const theme = extendTheme({
colors: {
primary: {
50: '#6fc6f3', 100: '#5dbff2', 200: '#4bb8f0', 300: '#39b0ef', 400: '#27a9ed',
500: '#15a2ec', 600: '#1296db', 700: '#118ac9', 800: '#0f7db7', 900: '#0e71a5',
}
}
})
return (
<NativeBaseProvider theme={theme}>
<AppNavigation />
</NativeBaseProvider>
)
}
主题色说明
600是主题色,其它值表示该主题色的深度值
获取其它的深度值,可以访问https://www.colorhexa.com/index.php
引入些组件查看效果
import { useState } from 'react'
import { Button, Modal, FormControl, Input } from "native-base"
export default () => {
const [showModal, setShowModal] = useState(false)
return (
<>
<Button onPress={() => setShowModal(true)}>打开弹窗</Button>
<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
<Modal.Content maxWidth="400px">
<Modal.CloseButton />
<Modal.Header>Contact Us</Modal.Header>
<Modal.Body>
<FormControl>
<FormControl.Label>Name</FormControl.Label>
<Input />
</FormControl>
<FormControl mt="3">
<FormControl.Label>Email</FormControl.Label>
<Input />
</FormControl>
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" colorScheme="blueGray" onPress={() => {
setShowModal(false)
}}>
Cancel
</Button>
<Button onPress={() => {
setShowModal(false)
}}>
Save
</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
</>
)
}