yunakeji / react-native-guide

React Native 学习、工作中实践记录资料(汇聚知识，分享精华)

RN指南-学习、工作中研究与实践记录资料(汇聚知识，分享精华)

该项目用于分享我们在研究与实践React Native过程中的一些经验，总结，教程，以及踩过的一些坑。

本项目持续更新

欢迎加入群和大家一起讨论：

React Native学习交流群：601148398

目录

• Components(组件)
• Navigation
• Utilities
• 开源APP
• 教程指南

Components（组件）

文本 & 富内容 & html

• react-native-htmlview - html解析处理

UI

• rn-placeholder★37 - Skeleton placeholder loader with (optional) animations
• rn-sliding-up-panel ★22 - React Native draggable sliding up panel purly implemented in Javascript. Works nicely on both iOS and Android.
• react-native-md-motion-buttons - Material design motion button inspired by inVision app.
• react-native-fab - A FAB button component for Android and iOS, customizable, simple and as per material design specs.

Navigation

• native-navigation ★1237 - Native navigation library for React Native applications
• react-navigation,621 ★2586 - Easy to use Navigation for React Native

Text & Rich Content

• react-native-asciimage ★16 - An ASCIImage component for React Native
• react-native-draftjs-render ★6 - A React Native render for Draft.js model
• react-native-html-render ★74 - A html render for react-native
• react-native-html-to-pdf ★65 - Convert html strings to PDF documents using React Native
• react-native-html-webview ★90 - Display (possibly untrusted) HTML using a UIWebView in React Native.
• react-native-html ★9 - render html as react native custom elements
• react-native-htmltext ★90 - Use HTML like markup to create stylized text in react-native.
• react-native-hypertext ★19 - React Native module to render hypertext (text with links)
• react-native-universal-modal ★13 - Universal simple modal component for React Native
• react-native-hyperlink ★67 - A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable and stylable

Analytics

• react-native-ab ★110 - A component for rendering A/B tests in React Native
• react-native-google-analytics ★196 - Google Analytics for React Native!
• react-native-fabric ★476 - A React Native library for Fabric, Crashlytics and Answers
• react-native-mixpanel ★123 - A React Native wrapper for Mixpanel tracking
• react-native-segment-io-analytics ★44 - A React Native Segment wrapper!
• react-native-google-analytics-bridge ★389 - A native Google Analytics bridge for React Native. Uses the official libraries on both iOS and Android.

Utils & Infra

• react-native-HsvToRgb ★2 - a helper to convert HSV(HSB) color to RGB.
• react-native-aes ★15 - AES in react-native
• react-native-aws-signature ★33 - help generate signature required for using AWS API. Necessary to use S3, ec2, or other services.
• react-native-babel-jest ★10 - Simple testing configuration for React Native with Jest
• react-native-crypto ★54 - implementation of crypto for React Native
• react-native-des ★13 - A des crypto for react-native
• react-native-device-log ★29 - A UI and service for displaying dev-logs on devices.
• react-native-eval ★51 - Call any JS functions from your native code
• react-native-fluxbone ★5 - A group of libraries that help with the FluxBone pattern in React Native
• react-native-global-event-emitter ★36 - Shared event emitter between native and JS for React Native.
• react-native-immutable ★11 - using immutable.js library with react-native
• react-native-mock ★313 - A fully mocked and test-friendly version of react native

Forms

• react-native-gifted-form - 基础样式Form表单
• react-native-check-box - 复选框

Internationalization

• react-native-globalize ★61 - Globalization helper for React Native
• react-native-i18n ★516 - React Native + i18n.js
• rn-translate-template ★11 - I18n template for all iOS and Android supported languages
• react-native-intl ★21 - React Native module shipped native Intl implementation and Translation extension
• redux-react-native-i18n ★6 - An i18n solution for React Native apps on Redux

Build & Development

• react-native-assets ★29 - Module to manage assets. It allows you download assets from a network and store into a specific local folder on iOS
• babel-preset-react-native-stage-0 ★53 - a Babel preset with latest Javascript goodies
• react-native-build-cli ★3 - a cli tool for react-native build
• react-native-code-push ★2469 - React Native plugin for the CodePush service
• react-native-console-panel ★56 - react native component for display console messages.

Styling

• cairn ★98 - Simple, string-based style selector engine with support for basic inheritance.
• glamorous-native ★88 - A React Native version of glamorous - a component styling library.
• react-native-css ★584 - Style React-Native components with css and built in support for SASS.

System

• react-native-addressbook ★65 - AddressBook module for react-native
• react-native-android-geolocation ★17 - React Native Module to use Android Geolocation via Google Play API
• react-native-android-sms-listener ★66 - Allows you to listen for incoming SMS messages
• react-native-android-sms ★34 - A react native android module to list/send sms.
• react-native-android-speech ★27 - A text-to-speech library for Android React Native.
• react-native-android-sqlite ★28 - A react native android wrapper for SQLite
• react-native-app-info ★33 - React Native app info and version
• react-native-barcode-scanner ★50 - Barcode scanner for React Native
• react-native-barcodescanner ★298 - A barcode scanner component for react native - not maintained anymore - use react-native-camera.
• react-native-battery-status ★3 - A battery-status for react-native
• react-native-battery ★12 - A React Native module that returns the battery level/status of a device
• react-native-ble ★116 - React Native BLE using noble api surface
• react-native-bluetooth-state ★37 - Answering the question of "Is my bluetooth on?" in React Native
• react-native-callkit ★13 - iOS 10 CallKit framework for React Native
• react-native-calendar-reminders ★43 - React Native module for IOS EventKit Reminders
• react-native-carrier-info ★11 - React Native module bridge to obtain information about the user’s home cellular service provider.
• react-native-clipboard ★50 - React Native component for getting or setting clipboard content
• react-native-communications ★363 - Easily call, email, text or iMessage someone in React Native
• react-native-config ★388 - Config variables for React Native apps
• react-native-dotenv - A Babel preset let you import application configs from .env file (zero runtime dependency)
• react-native-contacts-rx ★10 - react-native-contacts counterpart that include the support of RxJS.
• react-native-contacts ★319 - React Native Contacts (android & ios)
• react-native-unified-contacts ★61 - React Native iOS 9+ Contacts (ios)
• react-native-detect-device ★10 - Detect a device on iOS or android in react-native.
• react-native-device-battery ★11 - Observe battery state changes in your react native application
• react-native-device-info-pod ★1 - Get device information using react-native
• react-native-device-info ★858 - Get device information using react-native
• react-native-device-motion ★25 - iOS device motion wrapper for React Native.
• react-native-device ★161 - UIDevice wrapper for React Native
• react-native-discovery ★36 - Discover nearby devics using BLE. Turn iOS and Android devices into beacons
• react-native-fs ★905 - Native filesystem access for react-native
• react-native-onesignal ★255 - React Native Library for OneSignal Push Notifications Service (iOS + Android)
• react-native-gcm-android ★155 - GCM for Android
• react-native-geocoder ★152 - react native geocoding and reverse geocoding
• react-native-geolocation-android ★3 - Geolocation module for react native android
• react-native-heading ★14 - Get device heading (compass) information on iOS or Android
• react-native-ibeacon ★223 - iBeacon support for React Native. The API is very similar to the CoreLocation Objective-C one with the only major difference that regions are plain JavaScript objects. Beacons don't work in the iOS simulator.
• react-native-icloud-sync ★24 - A react-native wrapper for syncing with icloud
• react-native-in-app-utils ★265 - A react-native wrapper for handling in-app payments.
• react-native-image-resizer ★189 - Rescale local image files with React Native.

Web

• react-native-bridgeable-webview ★11 - A react-native webview with bridge to react-native code
• react-native-browser-polyfill ★21 - A collection of polyfills for the react-native Javascript environment.
• react-native-browser ★59 - Full-featured web browser module for React Native apps, based on TOWebViewController

Media

• react-native-android-audio-streaming-aac ★19 - A react native streaming player
• react-native-audio-manager ★13 - Audio player library for react native Android
• react-native-audio-player ★11 - A React Native module to play audio on Android
• react-native-audioplayer ★82 - Small audio player library for react native
• react-native-audio ★246 - Record and play back audio in your iOS or Android React Native apps.
• react-native-camera ★2519 - Camera component
• react-native-color-grabber ★31 - React native component for finding dominant colors in an image
• react-native-incall-manager ★97 - Handling media-routes/sensors/events during a audio/video chat like webrtc
• react-native-media-capture ★2 - A media-capture for react-native
• react-native-mediaplayer ★8 - Simple full screen media player for React Native.
• react-native-media-meta ★10 - Get media file metadata in your React Native app
• react-native-photos-framework ★31 - A modern and comprehensive CameraRoll/iCloud-library for React Native
• react-native-player ★62 - Media player for react-native
• react-native-screcorder ★165 - Capture pictures and record Video with Vine-like tap to record
• react-native-simple-sound ★9 - Start, stop, and pause a sound. iOS only. Derived from https://github.com/zmxv/react-native-sound
• react-native-sound ★431 - React Native module for playing sound clips
• react-native-sound-demo ★6 - react-native-sound demo project
• react-native-speech ★123 - A text-to-speech library for React Native.
• react-native-video ★1483 - A Video component for react-native
• react-native-fullscreen-video - A full-screen video component on top of react-native-video
• react-native-volume-slider ★29 - React Native VolumeView component
• react-native-vlc-player ★34 - VLC Player for react-native
• react-native-camera-roll-picker ★108 - A React Native component providing images selection from camera roll
• react-native-audio-streaming ★262 - iOS & Android module to play an audio stream, with background support and media controls 🔈
• react-native-video-processing ★112 - Native Video editing/trimming/filtering library for React-Native

Storage

• react-native-couchbase-lite ★71 - couchbase lite binding for react-native
• react-native-db-models ★145 - Local DB Models for React Native Apps
• react-native-level-fs ★12 - fs for react-native using level-filesystem and asyncstorage-down
• react-native-mongoose ★10 - A AsyncStorage based mongoose like storage for react-native
• react-native-pouchdb ★30 - Run pouchdb in React Native!
• react-native-simple-store ★344 - A minimalistic wrapper around React Native's AsyncStorage.
• react-native-sqlite-storage ★668 - SQLite3 bindings for React Native (Android & iOS)
• react-native-sqlite ★474 - SQLite3 bindings for React Native
• react-native-sqlite-2 ★13 - SQLite3 Native Plugin for React Native for both Android and iOS
• react-native-storage ★715 - This is a local storage wrapper for both react-native(AsyncStorage) and browser(localStorage). ES6/babel is needed.
• react-native-store ★442 - A simple database base on react-native AsyncStorage.
• realm ★1755 - An alternative mobile database to SQLite & key-value stores.
• pouchdb-adapter-react-native-sqlite ★11 - PouchDB adapter using ReactNative SQLite as its backing store

Backend

• feathers - Feathers client that works in the React Native, the browser, or NodeJS.
• react-native-async-http ★3 - React Native component for async-http
• react-native-cognito ★54 - AWS Cognito-based authentication module for React Native.
• react-native-aws-cognito-js ★27 - An adaptation of Amazon Cognito Identity SDK for JavaScript in combination with AWS SDK for JavaScript for React Native.
• react-native-file-download ★35 - A simple file download module for react-native
• react-native-file-upload ★70 - A file upload plugin for react-native
• react-native-http ★11 - React native http
• react-native-jwt ★19 - React native compatible JSON web token utility
• react-native-lazyload ★177 - lazyload for react native
• react-native-meteor ★446 - Full Meteor Client
• react-native-multipeer ★71 - Communicate over ad hoc wifi using Multipeer Connectivity
• react-native-networking ★84 - react-native module to download and upload files with AFNetworking
• react-native-rest-kit ★57 - A React Native RESTful API kit that use the fetch method
• react-native-simple-auth ★289 - Native social authentication for React Native on iOS
• react-native-swift-socketio ★94 - A react native wrapper for socket.io-client-swift
• react-native-tcp ★58 - node's net API for react-native
• react-native-udp ★59 - node's dgram API for react-native
• react-native-uploader ★201 - A React Native module to upload files and camera roll assets. Supports progress notification.
• react-native-xmpp ★122 - XMPP Library for React Native
• aws-sdk-react-native ★379 - AWS SDK for React Native (Official developer preview)
• react-native-s3 ★43 - A React Native wrapper for AWS iOS/Android S3 SDK (TransferUtility)
• react-native-ssdp ★5 - A React Native fork of the SSDP protocol to discover plug and play devices.
• react-native-aws3 ★90 - Pure JavaScript React Native library for uploading to AWS S3
• react-native-fetch-blob ★573 - A module integrates network and file system. Supports file stream.

Integrations

• react-native-facebook-account-kit ★79 - A Facebook Account Kit SDK wrapper for React Native.
• react-native-amap ★16 - A React Native component for building maps with the AMap Android SDK

Monetization

• react-native-admob ★246 - A react-native component for Google AdMob banners.
• react-native-revmob ★7 - RevMob wrapper for React Native.
• react-native-stripe-api ★64 - A small React Native library for Stripe Rest API

Tab

• react-native-tab-menu - React Native 二级菜单组件

Animation（动画）

• react-native-gl-model-view - 图片动画，类似游戏人物的3D效果
• lottie-react-native - 超级好的动画效果
• react-native-login-animated - 超炫的登录页面

Other Platforms

• reactxp ★3686 - Library for cross-platform app development
• react-native-web ★4731 - React Native for Web
• react-native-watchkit ★0 - react native for WatchKit
• react-native-desktop ★8530 - React Native for OS X
• react-native-windows ★1619 - React Native for Universal Windows Platform
• react-native-tvos-controller ★2 - TvOS remote controller module for react native.

非常适合整站参考的项目

• Poplar - 非常适合整站的，重点参考

时间轴

• reactjs-conf-2016 - 时间轴效果
• react-native-timeline-listview - 时间轴效果

等级打分

• react-native-grading
• react-native-ratings

Effect(效果)

• react-native-read-more-text ★95
• react-native-mentions - 文本框输入，弹出@用户
• rn-emoji-feedback - 表情打5分类似的效果
• react-native-circular-slider - 时间圆盘效果

Parallax View(视觉效果)

• react-native-parallax-scroll-view
• react-native-dribbble-app
• ziliun-react-native

下拉alert通知效果

• react-native-dropdownalert

图片预加载

• react-native-smart-image-loader

自动完成

• react-native-autocomplete-input
• RCTAutoComplete

图片处理

• react-native-image-crop-picker - 图片处理截取

tabBottom效果图

• react-native-material-bottom-navigation

modal弹出窗口

• react-native-modalbox - 弹出窗口
• react-native-lightbox - 弹出窗口

Swiper效果

• react-native-swiper - 很多swiper基础
• react-native-magazine-listview
• react-native-looped-carousel

Chat(适合及时通讯聊天)

• react-native-reversed-flat-list ★89
• phoenix-react-native-mashup

瀑布流效果

• react-native-masonry

加载进度效果

• react-native-loader

安全Text

• react-native-smart-security-text - 遮挡部分手机号

可排序列表（表格）

• react-native-sortable-listview
• react-native-sortable-list

需要一部分效果(临时)

• react-native-tabbar
• React-Native-SnackBar-Component
• react-native-scrolltotop - 列表滚动到顶部效果
• den
• react-native-percentage-circle - 百分比的效果图
• react-native-pan-controller

Other(其他好用组件，未归类)

• react-native-responsive-ui ★82 - Building responsive UIs in React Native.
• react-native-foldview - 盒子展示效果.

角标

• react-native-smart-corner-label - 角标

APP介绍页

• react-native-app-intro - 介绍页

视频效果

• newswatch-react-native

更新升级

• react-native-auto-updater - 更新升级效果

小的学习案例

• rn-wunderlist - 小的学习案例
• travel-RN - 旅行社

颜色选择器

• Material-Colors-native - 还可以作为选项卡

城市选择器

• react-native-country-picker-modal - 城市选择器

选项卡

• mobile-shopping-react-native - 购物选项卡

框架

• nativebase - 很不错的UI框架
• teaset - UI框架

开源APP

Open source React Native apps and other examples.

• react_native_office - 办公OA
• react-native-nw-react-calculator - 移动、web、桌面跨平台应用
• JueJinClient
• react-native-nba-app
• ZhiHuDaily-React-Native
• react-native-Gank
• react-native-cnblogs - 仿博客园
• mdcc-client
• react-native-one - 部分效果可用
• GitterMobile - 部分效果可用

教程指南

Walkthroughs and tutorials that help you learn React Native.

• react-native navigation 使用教程
• 30-days-of-react-native - 30天学习RN，30个示例