React Native TouchableOpacity使用小记

项目中我们会经常使用到TouchableOpacity这个组件，下面简述下自己的见解：

1、相当于一个有点击功能的View

所以可以像View一样设置样式

 

2、被包含组件的margin会响应点击事件

所以我们要控制点击热区时，应当将margin考虑在内，这个比较好理解margin也是组件的一部分

 

3、TouchableOpacity的margin，margin不会响应点击事件

所以我们可以通过此简化布局

 

例如我们只想让白色卡片响应点击事件，而不想让间距响应点击事件，如图所示效果

 

 

视图结构

 

 

TouchableOpacity直接设置margin

export default class ComponentTest extends React.Component<IProps> {

    render() {
        return (
            // TouchableOpacity直接设置margin，margin不会响应点击事件
            <TouchableOpacity style={style.item_top_bg} onPress={() => {

            }}>
                <Text style={style.item_tab}>点我呀</Text>
                <Image source={require('../../../image/report_right.png')} />
            </TouchableOpacity>
        );
    }


}

const style = StyleSheet.create({
    item_top_bg: {
        borderRadius: 8,
        marginHorizontal:10,
        marginBottom: 10,
        paddingHorizontal: 15,
        paddingVertical: 20,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },

    item_tab: {
        flex: 1,
        fontSize: DeviceHelp.fontSize(17),
        fontWeight: DeviceHelp.fontBold,
        color: '#3480FF',
    },

})