编程马·菜鸟教程

Appearance

推荐第三方组件库 ​

UI 和工具库推荐 ​

在 React Native 开发中，使用第三方组件库可以大大提高开发效率，减少重复工作。本章节推荐一些常用的第三方组件库，包括 UI 组件、工具库等。

1. UI 组件库 ​

1.1 React Native Paper ​

简介：

  • 由 Google 开发的 Material Design 风格 UI 组件库
  • 提供了丰富的组件，如按钮、卡片、输入框等
  • 支持主题定制

安装：

bash
npm install react-native-paper

使用示例：

javascript
import { Button, TextInput, Card } from 'react-native-paper';

// 使用按钮
<Button mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

// 使用输入框
<TextInput label="Email" value={email} onChangeText={setEmail} />

// 使用卡片
<Card>
  <Card.Content>
    <Text>Card content</Text>
  </Card.Content>
</Card>

1.2 NativeBase ​

简介：

  • 跨平台 UI 组件库，支持 iOS 和 Android
  • 提供了丰富的组件，如表单、列表、导航等
  • 支持主题定制

安装：

bash
npm install native-base

使用示例：

javascript
import { Container, Header, Content, Button, Text } from 'native-base';

<Container>
  <Header />
  <Content>
    <Button onPress={() => console.log('Pressed')}>
      <Text>Press me</Text>
    </Button>
  </Content>
</Container>

1.3 React Native Elements ​

简介：

  • 易于使用的 UI 组件库
  • 提供了按钮、卡片、列表等常用组件
  • 支持自定义样式

安装：

bash
npm install react-native-elements

使用示例：

javascript
import { Button, Card, ListItem } from 'react-native-elements';

// 使用按钮
<Button title="Press me" onPress={() => console.log('Pressed')} />

// 使用卡片
<Card>
  <Card.Title>Card Title</Card.Title>
  <Card.Divider />
  <Card.Content>
    <Text>Card content</Text>
  </Card.Content>
</Card>

// 使用列表项
<ListItem>
  <ListItem.Content>
    <ListItem.Title>Item title</ListItem.Title>
  </ListItem.Content>
</ListItem>

1.4 Ant Design Mobile RN ​

简介：

  • Ant Design 官方推出的 React Native 版本
  • 提供了丰富的移动端组件
  • 支持主题定制

安装：

bash
npm install @ant-design/react-native

使用示例：

javascript
import { Button, Input, List } from '@ant-design/react-native';

// 使用按钮
<Button type="primary" onPress={() => console.log('Pressed')}>
  Press me
</Button>

// 使用输入框
<Input placeholder="Enter text" />

// 使用列表
<List>
  <List.Item>
    Item
  </List.Item>
</List>

2. 导航库 ​

2.1 React Navigation ​

简介：

  • React Native 官方推荐的导航库
  • 支持栈导航、标签导航、抽屉导航等
  • 提供了丰富的导航选项

安装：

bash
npm install @react-navigation/native @react-navigation/stack @react-navigation/bottom-tabs

使用示例：

javascript
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2.2 React Native Navigation ​

简介：

  • 由 Wix 开发的导航库
  • 基于原生导航组件
  • 性能优秀，适合复杂应用

安装：

bash
npm install react-native-navigation

使用示例：

javascript
import { Navigation } from 'react-native-navigation';

// 注册屏幕
Navigation.registerComponent('HomeScreen', () => HomeScreen);
Navigation.registerComponent('DetailsScreen', () => DetailsScreen);

// 启动应用
Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'HomeScreen'
          }
        }
      ]
    }
  }
});

3. 状态管理库 ​

3.1 Redux Toolkit ​

简介：

  • Redux 官方推荐的工具集
  • 简化了 Redux 的使用
  • 提供了 createSlice、createAsyncThunk 等实用工具

安装：

bash
npm install @reduxjs/toolkit react-redux

使用示例：

javascript
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';

// 创建 slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; }
  }
});

// 配置 store
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

// 在组件中使用
function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  
  return (
    <>
      <Text>{count}</Text>
      <Button onPress={() => dispatch(counterSlice.actions.increment())}>
        Increment
      </Button>
    </>
  );
}

3.2 MobX ​

简介：

  • 简单易用的状态管理库
  • 使用观察者模式
  • 响应式更新

安装：

bash
npm install mobx mobx-react

使用示例：

javascript
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

// 创建 store
class CounterStore {
  @observable count = 0;
  
  @action increment() {
    this.count += 1;
  }
  
  @action decrement() {
    this.count -= 1;
  }
}

const counterStore = new CounterStore();

// 在组件中使用
const Counter = observer(() => {
  return (
    <>
      <Text>{counterStore.count}</Text>
      <Button onPress={() => counterStore.increment()}>
        Increment
      </Button>
    </>
  );
});

4. 网络请求库 ​

4.1 Axios ​

简介：

  • 基于 Promise 的 HTTP 客户端
  • 支持拦截器、取消请求等功能
  • 适用于浏览器和 Node.js

安装：

bash
npm install axios

使用示例：

javascript
import axios from 'axios';

// 基本请求
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 带参数的请求
axios.get('https://api.example.com/data', {
  params: { id: 1 }
});

// POST 请求
axios.post('https://api.example.com/data', {
  name: 'John',
  age: 30
});

4.2 Fetch API ​

简介：

  • 浏览器内置的网络请求 API
  • 基于 Promise
  • 无需安装额外依赖

使用示例：

javascript
// 基本请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// POST 请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    age: 30
  })
});

5. 表单处理库 ​

5.1 Formik ​

简介：

  • 用于处理表单的库
  • 提供了表单状态管理、验证等功能
  • 易于集成 Yup 等验证库

安装：

bash
npm install formik yup

使用示例：

javascript
import { Formik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Password must be at least 6 characters').required('Required')
});

<Formik
  initialValues={{ email: '', password: '' }}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
    <>
      <TextInput
        value={values.email}
        onChangeText={handleChange('email')}
        onBlur={handleBlur('email')}
        placeholder="Email"
      />
      {touched.email && errors.email && <Text>{errors.email}</Text>}
      
      <TextInput
        value={values.password}
        onChangeText={handleChange('password')}
        onBlur={handleBlur('password')}
        placeholder="Password"
        secureTextEntry
      />
      {touched.password && errors.password && <Text>{errors.password}</Text>}
      
      <Button onPress={handleSubmit}>Submit</Button>
    </>
  )}
</Formik>

5.2 React Hook Form ​

简介：

  • 基于 Hook 的表单处理库
  • 性能优秀，减少不必要的渲染
  • 易于使用

安装：

bash
npm install react-hook-form

使用示例：

javascript
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => {
    console.log(data);
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: 'Email is required', pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Invalid email' } })} />
      {errors.email && <p>{errors.email.message}</p>}
      
      <input {...register('password', { required: 'Password is required', minLength: { value: 6, message: 'Password must be at least 6 characters' } })} />
      {errors.password && <p>{errors.password.message}</p>}
      
      <button type="submit">Submit</button>
    </form>
  );
}

6. 动画库 ​

6.1 React Native Reanimated ​

简介：

  • 高性能的动画库
  • 支持复杂的动画效果
  • 基于 React Native 的 Animated API 但性能更好

安装：

bash
npm install react-native-reanimated

使用示例：

javascript
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming
} from 'react-native-reanimated';

function App() {
  const offset = useSharedValue(0);
  
  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value }]
    };
  });
  
  const onPress = () => {
    offset.value = withTiming(offset.value === 0 ? 100 : 0);
  };
  
  return (
    <>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button onPress={onPress} title="Animate" />
    </>
  );
}

6.2 Lottie React Native ​

简介：

  • 用于播放 Lottie 动画的库
  • 支持 Adobe After Effects 导出的动画
  • 易于集成

安装：

bash
npm install lottie-react-native

使用示例：

javascript
import LottieView from 'lottie-react-native';

function App() {
  return (
    <LottieView
      source={require('./animation.json')}
      autoPlay
      loop
    />
  );
}

7. 工具库 ​

7.1 React Native Gesture Handler ​

简介：

  • 处理手势的库
  • 支持点击、长按、滑动等手势
  • 性能优秀

安装：

bash
npm install react-native-gesture-handler

使用示例：

javascript
import { GestureHandlerRootView, TapGestureHandler, State } from 'react-native-gesture-handler';

function App() {
  const handleTap = ({ nativeEvent }) => {
    if (nativeEvent.state === State.ACTIVE) {
      console.log('Tapped');
    }
  };
  
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <TapGestureHandler onHandlerStateChange={handleTap}>
        <Animated.View style={styles.box} />
      </TapGestureHandler>
    </GestureHandlerRootView>
  );
}

7.2 React Native Vector Icons ​

简介：

  • 提供了丰富的图标
  • 支持多种图标库，如 Material Icons、Font Awesome 等
  • 易于使用

安装：

bash
npm install react-native-vector-icons

使用示例：

javascript
import Icon from 'react-native-vector-icons/MaterialIcons';

function App() {
  return (
    <Icon name="home" size={30} color="#900" />
  );
}

7.3 React Native Async Storage ​

简介：

  • 用于本地存储的库
  • 支持异步操作
  • 替代了已废弃的 AsyncStorage

安装：

bash
npm install @react-native-async-storage/async-storage

使用示例：

javascript
import AsyncStorage from '@react-native-async-storage/async-storage';

// 存储数据
const storeData = async (value) => {
  try {
    const jsonValue = JSON.stringify(value);
    await AsyncStorage.setItem('key', jsonValue);
  } catch (e) {
    console.error(e);
  }
};

// 读取数据
const getData = async () => {
  try {
    const jsonValue = await AsyncStorage.getItem('key');
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  } catch (e) {
    console.error(e);
  }
};

8. 其他实用库 ​

8.1 React Native Camera ​

简介：

  • 用于访问设备相机的库
  • 支持拍照、录像等功能
  • 易于集成

安装：

bash
npm install react-native-camera

8.2 React Native Maps ​

简介：

  • 用于显示地图的库
  • 支持标记、路线等功能
  • 基于 Google Maps 或 Apple Maps

安装：

bash
npm install react-native-maps

8.3 React Native Web ​

简介：

  • 使 React Native 代码可以在 Web 上运行
  • 支持大部分 React Native 组件
  • 易于实现跨平台开发

安装：

bash
npm install react-native-web react-dom @expo/metro-runtime

总结 ​

选择合适的第三方组件库可以大大提高 React Native 开发效率。在选择库时，应该考虑以下因素：

  1. 社区活跃度：选择有活跃社区支持的库
  2. 维护状态：选择定期更新的库
  3. 文档质量：选择文档完善的库
  4. 性能：选择性能优秀的库
  5. 功能需求：根据项目需求选择合适的库

建议在项目初始化时就确定需要使用的核心库，并保持库的版本一致，避免版本冲突问题。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建