文章目录

十个优质React-Native开源项目

以下是一些优质的 React Native 开源项目：

1. React Native Elements

React Native Elements 是一个跨平台的 React Native UI 工具包，提供了丰富的 UI 组件，帮助开发者快速构建应用。它的设计目标是提供一致的外观和感觉，同时简化样式和主题的管理。

1.1项目地址

GitHub

官方文档

1.2 特性

• 跨平台: 支持 iOS 和 Android。
• 丰富的组件: 提供了按钮、输入框、卡片、列表等常用组件。
• 可定制: 允许开发者根据需求自定义组件的样式和行为。
• 易于使用: 组件 API 设计简洁，易于上手。

1.3 安装

你可以使用 npm 或 yarn 来安装 React Native Elements：

npm install react-native-elements
# 或者
yarn add react-native-elements

1.4 示例代码

以下是一个简单的示例，展示了如何使用 React Native Elements 创建一个包含按钮和输入框的界面：

import React from 'react';
import { View } from 'react-native';
import { Button, Input } from 'react-native-elements';

const App = () => {
  return (
    <View style={{ padding: 20 }}>
      <Input
        placeholder="输入你的名字"
        leftIcon={{ type: 'font-awesome', name: 'user' }}
      />
      <Button
        title="提交"
        onPress={() => alert('按钮被点击了')}
      />
    </View>
  );
};

export default App;

2. React Native Paper

React Native Paper 是一个高质量的跨平台 Material Design 组件库，适用于 React Native 应用。它提供了一系列预定义的组件，帮助开发者快速构建符合 Material Design 规范的用户界面。

2.1项目地址

GitGub

官方文档

2.2特性

• 跨平台: 支持 iOS 和 Android。
• Material Design: 遵循 Google 的 Material Design 规范。
• 丰富的组件: 提供了按钮、卡片、对话框、文本输入等常用组件。
• 可定制: 允许开发者根据需求自定义组件的样式和主题。

2.3安装

可以使用 npm 或 yarn 来安装 React Native Paper：

npm install react-native-paper
# 或者
yarn add react-native-paper

2.4示例代码

以下是一个简单的示例，展示了如何使用 React Native Paper 创建一个包含按钮和文本输入框的界面：

import * as React from 'react';
import { View } from 'react-native';
import { Button, TextInput, Provider as PaperProvider } from 'react-native-paper';

const App = () => {
  const [text, setText] = React.useState('');

  return (
    <PaperProvider>
      <View style={{ padding: 20 }}>
        <TextInput
          label="输入你的名字"
          value={text}
          onChangeText={text => setText(text)}
        />
        <Button
          mode="contained"
          onPress={() => alert(`你好, ${text}`)}
          style={{ marginTop: 20 }}
        >
          提交
        </Button>
      </View>
    </PaperProvider>
  );
};

export default App;

3. React Navigation

React Navigation 是一个用于 React Native 应用的导航解决方案，支持堆栈导航、标签导航、抽屉导航等多种导航方式。它提供了灵活且易于使用的 API，帮助开发者轻松实现复杂的导航结构。

3.1 项目地址

GitHub

官方文档

3.2 特性

• 多种导航方式: 支持堆栈导航、标签导航、抽屉导航等。
• 高度可定制: 允许开发者根据需求自定义导航行为和样式。
• 社区支持: 拥有活跃的社区和丰富的插件生态系统。

3.3 安装

使用 npm 或 yarn 来安装 React Navigation 及其依赖项：

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context
# 或者
yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context

3.4 示例代码

以下是一个简单的示例，展示了如何使用 React Navigation 创建一个包含两个屏幕的堆栈导航：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Text } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const DetailsScreen = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
};

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

export default App;

4. Lottie for React Native

Lottie for React Native 是一个用于在 React Native 应用中渲染 Adobe After Effects 动画的库。它使得在移动应用中使用复杂的动画变得非常简单和高效。

4.1 项目地址

GitHub

官方文档

4.2 特性

• 高性能: 使用原生代码渲染动画，性能优越。
• 易于使用: 提供了简单的 API 来加载和控制动画。
• 跨平台: 支持 iOS 和 Android。

4.3 安装

使用 npm 或 yarn 来安装 Lottie for React Native及其依赖项：

npm install lottie-react-native
npm install lottie-ios@3.1.8
# 或者
yarn add lottie-react-native
yarn add lottie-ios@3.1.8

4.4 链接原生依赖

对于 React Native 0.60 及以上版本，自动链接已经集成在 React Native CLI 中。对于更早的版本，你需要手动链接：

react-native link lottie-react-native

4.5 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 Lottie 加载和播放动画：


import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('./path/to/animation.json')}
        autoPlay
        loop
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

5. React Native Firebase

React Native Firebase 是 Firebase 的 React Native 封装，提供了 Firebase 的所有功能，如身份验证、数据库、存储等。它使得在 React Native 应用中集成 Firebase 服务变得非常简单和高效。

5.1 项目地址

GitHub

官方文档

5.2 特性

• 全面的 Firebase 支持: 包括身份验证、实时数据库、云存储、云消息等。
• 跨平台: 支持 iOS 和 Android。
• 高性能: 使用原生代码与 Firebase 进行交互，性能优越。

5.3 安装

使用 npm 或 yarn 来安装 React Native Firebase及其依赖项：


npm install @react-native-firebase/app
# 安装其他 Firebase 模块，例如身份验证
npm install @react-native-firebase/auth
# 或者
yarn add @react-native-firebase/app
yarn add @react-native-firebase/auth

5.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 Firebase 进行用户身份验证：


import React, { useState } from 'react';
import { View, Button, TextInput, Text } from 'react-native';
import auth from '@react-native-firebase/auth';

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);

  const signIn = async () => {
    try {
      const userCredential = await auth().signInWithEmailAndPassword(email, password);
      setUser(userCredential.user);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {user ? (
        <Text>欢迎, {user.email}</Text>
      ) : (
        <>
          <TextInput
            placeholder="电子邮件"
            value={email}
            onChangeText={setEmail}
            style={{ marginBottom: 10 }}
          />
          <TextInput
            placeholder="密码"
            value={password}
            onChangeText={setPassword}
            secureTextEntry
            style={{ marginBottom: 10 }}
          />
          <Button title="登录" onPress={signIn} />
        </>
      )}
    </View>
  );
};

export default App;

6. React Native Vector Icons

React Native Vector Icons 是一个流行的图标库，包含了数百个图标，支持自定义图标字体。它可以帮助你在 React Native 应用中轻松集成各种图标。

6.1 项目地址

GitHub

官方文档

6.2 特性

• 丰富的图标集: 包含了 FontAwesome、MaterialIcons、Ionicons 等多个流行的图标集。
• 自定义图标: 支持自定义图标字体。
• 跨平台: 支持 iOS 和 Android。

6.3 安装

使用 npm 或 yarn 来安装 及其依赖项：

npm install react-native-vector-icons
# 或者
yarn add react-native-vector-icons

6.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 React Native Vector Icons：


import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>React Native Vector Icons 示例</Text>
      <Icon name="rocket" size={30} color="#900" />
    </View>
  );
};

export default App;

7. React Native Maps

React Native Maps 是一个用于在 React Native 应用中集成地图的库，支持 Google Maps 和 Apple Maps。它提供了丰富的功能和高度的可定制性，帮助开发者在应用中轻松实现地图相关的功能。

7.1 项目地址

GitHub

官方文档

7.2 特性

• 跨平台: 支持 iOS 和 Android。
• 多种地图类型: 支持标准地图、卫星地图、混合地图等。
• 丰富的功能: 支持标记、折线、多边形、圆形等图形元素。
• 高度可定制: 允许开发者根据需求自定义地图的样式和行为。

7.3 安装

使用 npm 或 yarn 来安装 项目及其依赖项：


npm install react-native-maps
# 或者
yarn add react-native-maps

7.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 React Native Maps 显示一个基本的地图：

import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const App = () => {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          title="标记标题"
          description="标记描述"
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default App;

8. React Native Reanimated

React Native Reanimated 是一个高性能的动画库，提供了更流畅的动画体验。它允许你在 React Native 应用中创建复杂且高效的动画。

8.1 项目地址

GitHub

官方文档

8.2 特性

• 高性能: 使用原生代码执行动画，性能优越。
• 灵活性: 提供了丰富的动画 API，支持复杂的动画效果。
• 跨平台: 支持 iOS 和 Android。

8.3 安装

使用 npm 或 yarn 来安装项目及其依赖项：

npm install react-native-reanimated
# 或者
yarn add react-native-reanimated

8.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 React Native Reanimated 创建一个基本的动画：

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Animated, { Easing } from 'react-native-reanimated';

const { Value, timing } = Animated;

const App = () => {
  const animationValue = new Value(0);

  const startAnimation = () => {
    timing(animationValue, {
      toValue: 1,
      duration: 1000,
      easing: Easing.inOut(Easing.ease),
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.box,
          {
            opacity: animationValue,
            transform: [
              {
                translateY: animationValue.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 200],
                }),
              },
            ],
          },
        ]}
      />
      <Button title="开始动画" onPress={startAnimation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default App;

9. React Native Gesture Handler

React Native Gesture Handler 是一个用于处理手势的库，提供了更高效和流畅的手势处理体验。它可以帮助你在 React Native 应用中实现复杂的手势交互。

9.1 项目地址

GitHub

官方文档

9.2 特性

• 高性能: 使用原生代码处理手势，性能优越。
• 丰富的手势支持: 支持点击、长按、滑动、拖拽、缩放等多种手势。
• 跨平台: 支持 iOS 和 Android。

9.3 安装

使用 npm 或 yarn 来安装项目及其依赖项：

npm install react-native-gesture-handler
# 或者
yarn add react-native-gesture-handler

9.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 React Native Gesture Handler 实现一个基本的手势处理：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView, RectButton } from 'react-native-gesture-handler';

const App = () => {
  const onButtonPress = () => {
    alert('按钮被点击了');
  };

  return (
    <GestureHandlerRootView style={styles.container}>
      <RectButton style={styles.button} onPress={onButtonPress}>
        <Text style={styles.buttonText}>点击我</Text>
      </RectButton>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'blue',
    padding: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default App;

10. React Native Vision Camera

React Native Vision Camera 是一个高性能的相机库，提供了丰富的功能和高度的可定制性，适用于 React Native 应用。它支持拍照、录像、实时处理等功能。

10.1 项目地址

GitHub

官方文档

10.2 特性

• 高性能: 使用原生代码处理相机功能，性能优越。
• 实时处理: 支持实时图像处理和分析。
• 高度可定制: 允许开发者根据需求自定义相机的行为和样式。
• 跨平台: 支持 iOS 和 Android。

10.3 安装

使用 npm 或 yarn 来安装项目 及其依赖项：

npm install react-native-vision-camera
# 或者
yarn add react-native-vision-camera

10.4 示例代码

以下是一个简单的示例，展示了如何在 React Native 应用中使用 React Native Vision Camera 实现基本的拍照功能：

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { Camera, useCameraDevices } from 'react-native-vision-camera';

const App = () => {
  const cameraRef = useRef(null);
  const devices = useCameraDevices();
  const device = devices.back;

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePhoto({
        qualityPrioritization: 'quality',
      });
      console.log(photo.path);
    }
  };

  if (device == null) return <View style={styles.container}><Text>Loading...</Text></View>;

  return (
    <View style={styles.container}>
      <Camera
        ref={cameraRef}
        style={styles.camera}
        device={device}
        isActive={true}
        photo={true}
      />
      <Button title="拍照" onPress={takePicture} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  camera: {
    width: '100%',
    height: '80%',
  },
});

export default App;
# reactnative
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊