react-native-root-toast

teaset

UI 库

notification

react-native-notifications
react-native-push-notification

@react-native-async-storage/async-storage

封装好的 react-native-simple-store

react-native-localize 国际化

nativebase

https://docs.nativebase.io/

输入框表单验证

https://github.com/gcanti/tcomb-form-native
https://github.com/FaridSafi/react-native-gifted-form
https://github.com/bartonhammond/snowflake

键盘遮挡问题

https://github.com/reactnativecn/react-native-inputscrollview
https://github.com/wix/react-native-keyboard-aware-scrollview

扫描二维码

https://github.com/lazaronixon/react-native-qrcode-reader

缓存管理

https://github.com/reactnativecn/react-native-http-cache

手势放大缩小移动

https://github.com/kiddkai/react-native-gestures
https://github.com/johanneslumpe/react-native-gesture-recognizers

下拉-上拉-刷新

https://github.com/FaridSafi/react-native-gifted-listview
https://github.com/jsdf/react-native-refreshable-listview
https://github.com/greatbsky/react-native-pull/wiki

下拉选择

https://github.com/alinz/react-native-dropdown

图片查看

https://github.com/oblador/react-native-lightbox

照片选择

https://github.com/marcshilling/react-native-image-picker
https://github.com/ivpusic/react-native-image-crop-picker

图片加载进度条

https://github.com/oblador/react-native-image-progress

加密 crypto-js

https://github.com/brix/crypto-js

国际化

https://github.com/joshswan/react-native-globalize

react-native-storage 持久化存储

react-native-countdown 倒计时

react-native-keychain

iOS KeyChain管理

react-native-fast-image

react-native-easy-toast

https://www.npmjs.com/package/react-native-easy-toast

react-native-device-info

https://www.npmjs.com/package/react-native-device-info

  1. import { getUniqueId, getManufacturer } from 'react-native-device-info';

react-native-safe-area-context

A flexible way to handle safe area, also works on Android and Web!

https://www.npmjs.com/package/react-native-safe-area-context

react-native-reanimated

Shared Values 共享的值

Shared Values are among fundamental concepts behind Reanimated 2.0. If you are familiar with React Native’s Animated API you can compare them to Animated.Values.

They serve a similar purpose of carrying “animateable” data, providing a notion of reactiveness, and driving animations. We will discuss each of those key roles of Shared Values in sections below. At the end we present a brief overview of the differences between Shared Values and Animated.Value for the readers familiar with the Animated API.

共享值是Reanimated 2.0背后的基本概念。 如果您熟悉React Native的Animated API，可以将它们与Animated.Values进行比较。
它们具有类似的目的，即携带“可动画处理的”数据，提供反应性的概念并驱动动画。

What Animated Value Shared Value
Payload 负载 Only numeric and string values are supported Any primitive or nested data structure (like objects, arrays, strings, numbers, booleans).
Connecting with View’s props By passing
Animated.Value
directly as a prop		 Shared Values cannot be directly hooked as View’s props. You should use
useAnimatedStyle
or
useAnimatedProps
where you can access Shared Values and return them as selected styles/props or process them to calculate the styles.
Updating values
更新值		 Using
value.setValue
method (which is an async call when the value is using native driver)		 By updating
.value
property. Updating
.value
is sync when running on the UI thread, or async when running on the React Native JS thread.
Reading values
读取值		 Register listener with
value.addListener
to get all animated value updates.		 By reading
.value
property you can access the current value stored in the Shared Value (both from the UI and React Native JS thread).
Running animations
运行动画		 Use
Animated.spring
,
Animated.timing
(or others), pass Animated Value as an argument, and run
.start()
method to launch the animation.		 Update
.value
prop as usual while wrapping the target with one of the animation utility methods (e.g.,
withTiming
).
Stopping animations
停止动画		 Hold the reference to the animation object returned by
Animated.timing
and similar, then call
stopAnimation()
method on it.		 Use
cancelAnimation
method and pass the Shared Value that runs the animation.
Interpolating
值的映射		 Use
interpolate()
member method of Animated Value.		 Use an
interpolate
method that takes a number and config similar to Animated’s interpolate, then returns an interpolated number. This can be used along with
useDerivedValue
if you need a Shared Value that automatically tracks the interpolation of another Shared Value.

animations

Animations are first-class citizens in Reanimated 2. The library comes bundled with a number of animation helper methods that makes it very easy to go from immediate property updates into animated ones.

withSpring

withTiming

withDelay

withSequence

withRepeat

  1. <Button
  2.   onPress={() => {
  3.     offset.value = withSpring(Math.random(), {}, (finished) => {
  4.       if (finished) {
  5.         console.log("ANIMATION ENDED");
  6.       } else {
  7.         console.log("ANIMATION GOT CANCELLED");
  8.       }
  9.     });
  10.   }}
  11.   title="Move"
  12. />
  15. import { Easing, withTiming } from 'react-native-reanimated';
  17. offset.value = withTiming(0, {
  18.   duration: 500,
  19.   easing: Easing.out(Easing.exp),
  20. });
  22.  const customSpringStyles = useAnimatedStyle(() => {
  23.     return {
  24.       transform: [
  25.         {
  26.           translateX: withSpring(offset.value * 255, {
  27.             damping: 20,
  28.             stiffness: 90,
  29.           }),
  30.         },
  31.       ],
  32.     };
  33.   });
  36. rotation.value = withSequence(
  37.   withTiming(-10, { duration: 50 }),
  38.   withRepeat(withTiming(ANGLE, { duration: 100 }), 6, true),
  39.   withTiming(0, { duration: 50 })
  40. );

events

gesture events

  1. const EventsExample = () => {
  2.   const pressed = useSharedValue(false);
  3.   return (
  4.     <TapGestureHandler onGestureEvent={eventHandler}>
  5.       // <Animated.View style={[styles.ball]} />
  6.       <Animated.View style={[styles.ball, uas]} />
  7.     </TapGestureHandler>
  8.   );
  9. };
  11. const eventHandler = useAnimatedGestureHandler({
  12.   onStart: (event, ctx) => {
  13.     pressed.value = true;
  14.   },
  15.   onEnd: (event, ctx) => {
  16.     pressed.value = false;
  17.   },
  18. });
  20. const uas = useAnimatedStyle(() => {
  21.   return {
  22.     backgroundColor: pressed.value ? '#FEEF86' : '#001972',
  23.     transform: [{ scale: withSpring(pressed.value ? 1.2 : 1) }],
  24.   };
  25. });

Using context

Let’s now try to modify the above example to make the view stay in the place where we lift the finger up

  1. // we can save the starting position in onStart callback using context
  2. onStart: (event, ctx) => {
  3.   pressed.value = true;
  4.   ctx.startX = x.value;
  5.   ctx.startY = y.value;
  6. },
  8. onActive: (event, ctx) => {
  9.   x.value = ctx.startX + event.translationX;
  10.   y.value = ctx.startY + event.translationY;
  11. },

react-native-screens

It is not designed to be used as a standalone library but rather as a dependency of a full-featured navigation library.

react-native-gesture-handler

react-native-tab-view