React Navigation源代码阅读 ：views/TouchableItem.js

/**
 *
 * 封装一个 touchable 组件，在 iOS 和 Android 都使用原生的效果 。
 *
 * 其实是对 TouchableNativeFeedback 和 TouchableOpacity 的抽象和封装:
 * 1. 到底使用 TouchableNativeFeedback 还是 TouchableOpacity ?
 * 1.1 Android 平台并且平台版本>=21时使用 TouchableNativeFeedback
 * 1.2 Android 平台并且平台版本<21, 或者 iOS, 使用 TouchableOpacity
 * 2. TouchableItem 的 props 和 children 会继续传递给所封装的 TouchableNativeFeedback 
 *    或者  TouchableOpacity
 *
 * TouchableItem renders a touchable that looks native on both iOS and Android.
 *
 * It provides an abstraction on top of TouchableNativeFeedback and
 * TouchableOpacity.
 *
 * On iOS you can pass the props of TouchableOpacity, on Android pass the props
 * of TouchableNativeFeedback.
 */
import React from 'react';
import {
  Platform,
  TouchableNativeFeedback,
  TouchableOpacity,
  View,
} from 'react-native';

const ANDROID_VERSION_LOLLIPOP = 21;

export default class TouchableItem extends React.Component {
  static defaultProps = {
    borderless: false,
    pressColor: 'rgba(0, 0, 0, .32)',
  };

  render() {
    /*
     * TouchableNativeFeedback.Ripple causes a crash on old Android versions,
     * therefore only enable it on Android Lollipop and above.
     *
     * All touchables on Android should have the ripple effect according to
     * platform design guidelines.
     * We need to pass the background prop to specify a borderless ripple effect.
     */
    if (
      Platform.OS === 'android' &&
      Platform.Version >= ANDROID_VERSION_LOLLIPOP
    ) {
      // 针对安卓平台，当安卓版本>=21 时使用 TouchableNativeFeedback
      const { style, ...rest } = this.props;
      return (
        <TouchableNativeFeedback
          {...rest}
          style={null}
          background={TouchableNativeFeedback.Ripple(
            this.props.pressColor,
            this.props.borderless
          )}
        >
          <View style={style}>{React.Children.only(this.props.children)}</View>
        </TouchableNativeFeedback>
      );
    }

    // 其他情况下使用 TouchableOpacity
    return (
      <TouchableOpacity {...this.props}>{this.props.children}</TouchableOpacity>
    );
  }
}