0
点赞
收藏
分享

微信扫一扫

Rn引入NativeBase组件库并自定义主题色


Rn引入NativeBase组件库并自定义主题色_ide

在查看expo文档的时候,发现它推荐了好几款组件库,我全部查看了一遍后,觉得NativeBase是比较好用的,且一直都在维护中,所以决定引入查看效果

https://docs.expo.dev/ui-programming/user-interface-libraries/

Rn引入NativeBase组件库并自定义主题色_react.js_02

安装

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

Rn引入NativeBase组件库并自定义主题色_Group_03


引入些组件查看效果

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>
        </>
    )
}


举报

相关推荐

0 条评论