三、核心组件体系
NativeBase提供了近40个高质量的组件，以下是开发中最常用的核心组件分类。
3.1 基础组件
3.1.1 Box容器组件
Box是最基础的布局组件，类似于div，支持所有布局属性：
import { Box, Text } from 'native-base';
function Card() {
return (
<Box
bg="primary.500"
p={4}
rounded="lg"
shadow={2}
>
<Text color="white">卡片内容</Text>
</Box>
);
}
3.1.2 Text文本组件
Text用于显示文本内容，支持字体、颜色、对齐等样式控制：
<Text
fontSize="xl"
fontWeight="bold"
color="coolGray.800"
textAlign="center"
>
标题文本
</Text>
3.2 布局组件
3.2.1 Stack堆栈布局
Stack是管理子元素间距的强大工具：
import { Stack, Button } from 'native-base';
function ButtonGroup() {
return (
<Stack space={4} direction="row">
<Button>取消</Button>
<Button colorScheme="blue">确认</Button>
</Stack>
);
}
3.2.2 HStack/VStack
HStack（水平堆栈）和VStack（垂直堆栈）是Stack的便捷变体：
import { HStack, VStack, Avatar, Text } from 'native-base';
function UserInfo() {
return (
<HStack space={3} alignItems="center">
<Avatar source={
{ uri: 'https://...' }} />
<VStack space={1}>
<Text fontWeight="bold">张三</Text>
<Text fontSize="sm" color="gray.500">产品经理</Text>
</VStack>
</HStack>
);
}
3.3 表单组件
3.3.1 Input输入框
Input组件支持多种类型和状态：
import { Input, FormControl } from 'native-base';
function LoginForm() {
return (
<FormControl isRequired>
<FormControl.Label>邮箱</FormControl.Label>
<Input
placeholder="请输入邮箱"
keyboardType="email-address"
onChangeText={handleEmailChange}
/>
<FormControl.ErrorMessage>
请输入有效的邮箱地址
</FormControl.ErrorMessage>
</FormControl>
);
}
3.3.2 Button按钮
Button是用户交互的核心组件：
<Button
colorScheme="blue"
size="lg"
isLoading={isLoading}
onPress={handlePress}
>
登录
</Button>
3.4 反馈组件
3.4.1 Modal模态框
import { Modal, Button } from 'native-base';
function ConfirmDialog({ isOpen, onClose }) {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<Modal.Content>
<Modal.CloseButton />
<Modal.Header>确认操作</Modal.Header>
<Modal.Body>
确定要执行此操作吗？此操作不可撤销。
</Modal.Body>
<Modal.Footer>
<Button.Group space={2}>
<Button variant="ghost" onPress={onClose}>取消</Button>
<Button onPress={handleConfirm}>确定</Button>
</Button.Group>
</Modal.Footer>
</Modal.Content>
</Modal>
);
}
3.4.2 Toast提示
import { useToast, Button } from 'native-base';
function ToastExample() {
const toast = useToast();
const showToast = () => {
toast.show({
title: "操作成功",
description: "数据已保存",
duration: 3000,
placement: "top"
});
};
return <Button onPress={showToast}>显示提示</Button>;
}
3.5 数据展示组件
3.5.1 Avatar头像
<Avatar
source={
{ uri: 'https://example.com/avatar.jpg' }}
size="lg"
>
<Avatar.Badge bg="green.500" />
</Avatar>
3.5.2 Badge徽章
<Badge colorScheme="danger" variant="solid">
热门
</Badge>
四、主题定制
4.1 主题定制原理
NativeBase的主题定制是通过extendTheme函数实现的。该函数允许你深度定制组件的样式和行为，是NativeBase最强大的特性之一。
4.2 使用extendTheme定制组件
NativeBase的extendTheme函数是其自定义能力的核心。通过它，你可以覆盖全局的颜色、字体、间距等设计令牌（Design Tokens），也可以针对特定组件进行精细调整。
定制Button组件示例：
import { NativeBaseProvider, extendTheme } from 'native-base';
const theme = extendTheme({
components: {
Button: {
// 1. 设置默认属性
defaultProps: {
colorScheme: 'red'
},
// 2. 覆盖基础样式
baseStyle: {
rounded: 'md'
},
// 3. 添加新的变体
variants: {
rounded: ({ colorScheme }) => ({
bg: `${colorScheme}.500`,
rounded: 'full'
})
}
},
Heading: {
// baseStyle也可以是一个函数，动态访问主题工具
baseStyle: ({ colorMode }) => ({
color: colorMode === 'dark' ? 'red.300' : 'blue.300',
fontWeight: 'normal'
})
}
}
});
function App() {
return (
<NativeBaseProvider theme={theme}>
{/* 应用内容 */}
</NativeBaseProvider>
);
}
在上面的代码中，我们通过baseStyle定义了组件的默认样式，通过defaultProps设置了默认属性值，还通过variants创建了一个名为rounded的新按钮变体。使用时只需< Button variant="rounded">即可。
4.3 baseStyle与defaultProps的区别
理解这两个概念是深度定制NativeBase的关键：
4.4 调色板系统
NativeBase的调色板是其主题系统的核心。NativeBase v3预定义了许多颜色令牌，如emerald.400、coolGray.600、violet.500等。
600是主题色，其它值（如400、700）表示该主题色的深度值，数字越大颜色越深。
你可以在extendTheme的colors属性中定义自己的颜色系统。
const theme = extendTheme({
colors: {
brand: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a'
}
}
});
// 使用时
<Button colorScheme="brand">品牌按钮</Button>
