其他第三方库 - wangshengliang

除了前面我们所介绍的 React Navigation 以及 Redux 以外，在 RN 开发中我们还会涉及到与需求相对应的其他第三方库。

下面的地址罗列出了目前在 RN 中支持的第三方库：https://reactnative.directory/

每一个第三方库下面会标注所支持的平台以及其他相关信息。

我们以轮播图为例，首先搜索 carousel，就会出现各种轮播图相关的第三方库。

选择一个 star 数较高的库，点击进去后，一般是一个 Github 仓库，里面就有作者所记录的该库的具体用法。

下面是 react-native-snap-carousel 这个轮播图库官方给出的一个示例：

import React, { Component } from 'react'
import { Text, View, Dimensions, StyleSheet } from 'react-native'

import Carousel from 'react-native-snap-carousel' // Version can be specified in package.json

import { scrollInterpolator, animatedStyles } from './utils/animations'

const SLIDER_WIDTH = Dimensions.get('window').width
const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7)
const ITEM_HEIGHT = Math.round((ITEM_WIDTH * 3) / 4)

const DATA = []
for (let i = 0; i < 10; i++) {
  DATA.push(i)
}

export default class App extends Component {
  state = {
    index: 0,
  }

  constructor(props) {
    super(props)
    this._renderItem = this._renderItem.bind(this)
  }

  _renderItem({ item }) {
    return (
      <View style={styles.itemContainer}>
        <Text style={styles.itemLabel}>{`Item ${item}`}</Text>
      </View>
    )
  }

  render() {
    return (
      <View>
        <Carousel
          ref={(c) => (this.carousel = c)}
          data={DATA}
          renderItem={this._renderItem}
          sliderWidth={SLIDER_WIDTH}
          itemWidth={ITEM_WIDTH}
          containerCustomStyle={styles.carouselContainer}
          inactiveSlideShift={0}
          onSnapToItem={(index) => this.setState({ index })}
          scrollInterpolator={scrollInterpolator}
          slideInterpolatedStyle={animatedStyles}
          useScrollView={true}
        />
        <Text style={styles.counter}>{this.state.index}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  carouselContainer: {
    marginTop: 50,
  },
  itemContainer: {
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'dodgerblue',
  },
  itemLabel: {
    color: 'white',
    fontSize: 24,
  },
  counter: {
    marginTop: 25,
    fontSize: 30,
    fontWeight: 'bold',
    textAlign: 'center',
  },
})

依赖的 animations.js：

import { Dimensions } from 'react-native'
import { getInputRangeFromIndexes } from 'react-native-snap-carousel' // 3.7.2

const SLIDER_WIDTH = Dimensions.get('window').width
const TRANSLATE_VALUE = Math.round((SLIDER_WIDTH * 0.3) / 4)

export function scrollInterpolator(index, carouselProps) {
  const range = [1, 0, -1]
  const inputRange = getInputRangeFromIndexes(range, index, carouselProps)
  const outputRange = range

  return { inputRange, outputRange }
}
export function animatedStyles(index, animatedValue, carouselProps) {
  const translateProp = carouselProps.vertical ? 'translateY' : 'translateX'
  let animatedOpacity = {}
  let animatedTransform = {}

  if (carouselProps.inactiveSlideOpacity < 1) {
    animatedOpacity = {
      opacity: animatedValue.interpolate({
        inputRange: [-1, 0, 1],
        outputRange: [
          carouselProps.inactiveSlideOpacity,
          1,
          carouselProps.inactiveSlideOpacity,
        ],
      }),
    }
  }

  if (carouselProps.inactiveSlideScale < 1) {
    animatedTransform = {
      transform: [
        {
          scale: animatedValue.interpolate({
            inputRange: [-1, 0, 1],
            outputRange: [
              carouselProps.inactiveSlideScale,
              1,
              carouselProps.inactiveSlideScale,
            ],
          }),
          [translateProp]: animatedValue.interpolate({
            inputRange: [-1, 0, 1],
            outputRange: [
              TRANSLATE_VALUE * carouselProps.inactiveSlideScale,
              0,
              -TRANSLATE_VALUE * carouselProps.inactiveSlideScale,
            ],
          }),
        },
      ],
    }
  }

  return {
    ...animatedOpacity,
    ...animatedTransform,
  }
}

当然，你在网络上也能够找到别人对 RN 第三方库的一些总结性文章，例如：

https://zhuanlan.zhihu.com/p/42400628

https://www.jianshu.com/p/809f6ee09613

https://www.jianshu.com/p/9e1c359e9e93

这里就不再一一赘述，使用第三方库的能力，其实就是考察你查阅文档的能力。