ReactNative中TouchableOpacity和TouchableHighlight的区别

写作时间：2021/2/3
开发平台：macOS
React-Native版本：0.63.2
目标平台：Android、iOS

TouchableOpacity：当按下的时候，封装的视图的不透明度会降低。

TouchableHighlight：当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。

效果：

测试代码

'use strict';

import React from 'react';
import {View, Text, TouchableOpacity, TouchableHighlight} from 'react-native';

export default class Touch extends React.Component {
    render() {
        return (
            <View style={{flex: 1, justifyContent: 'space-around', alignItems: 'center'}}>
                <TouchableOpacity style={{backgroundColor: 'cyan'}}>
                    <View style={{width: 200, height: 100, backgroundColor: 'orange'}}>
                        <Text>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                <TouchableHighlight activeOpacity={0.5} underlayColor={'cyan'} onPress={() => console.log('pressed!')}>
                    <View style={{width: 200, height: 100, backgroundColor: 'orange'}}>
                        <Text>TouchableHighlight</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

总结：
1、TouchableOpacity在点击时的效果只能降低包裹组件的透明度，设置的背景颜色无效
2、TouchableHighlight在点击时除了降低包裹组件的透明度之外，会同时透出自身定义的背景颜色
3、TouchableHighlight的效果实现需要设置activeOpacity和underlayColor（详见测试代码）