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

明知山

发布于 2023-05-23 10:04:16

6280

发布于 2023-05-23 10:04:16

在查看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>
        </>
    )
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-05-11，如有侵权请联系 cloudcommunity@tencent.com 删除

button