/**
*
* 封装一个 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>
);
}
}
React Navigation源代码阅读 :views/TouchableItem.js
猜你喜欢
转载自blog.csdn.net/andy_zhang2007/article/details/80480588
今日推荐
周排行