[TouchableOpacity] Reset opacity to the inactiveValue rather than always 1.0
Summary: As per #941 - fixes bug with `TouchabeOpacity` always reseting child opacity to `1.0` after press. A note about the code: we could probably use a general `getNativeProp(propName, callback)` function rather than `getOpacity` but just used that as it was simpler for this specific PR, perhaps that refactor could be left to another - or maybe there is a way to do this already that I missed. Before: ![bug](https://cloud.githubusercontent.com/assets/90494/7287207/52d6a686-e907-11e4-8e16-04b2ddd0582c.gif) After: ![after](https://cloud.githubusercontent.com/assets/90494/7287689/5aca4776-e90c-11e4-8c40-aa6bd3e822d8.gif) Example code: ```javascript 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, TouchableOpacity, } = React; var TestIt = React.createClass({ render() { return ( <View style={styles.container}> <TouchableOpacity activeOpacity={0.3}> <View style={styles.searchButton}> <Text> Closes https://github.com/facebook/react-native/pull/977 Github Author: Brent Vatne <brent.vatne@madriska.com> Test Plan: Imported from GitHub, without a `Test Plan:` line.
This commit is contained in:
Родитель
47164baaec
Коммит
0b844feedb
|
@ -20,6 +20,7 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
|||
|
||||
var cloneWithProps = require('cloneWithProps');
|
||||
var ensureComponentIsNative = require('ensureComponentIsNative');
|
||||
var flattenStyle = require('flattenStyle');
|
||||
var keyOf = require('keyOf');
|
||||
var onlyChild = require('onlyChild');
|
||||
|
||||
|
@ -105,12 +106,12 @@ var TouchableOpacity = React.createClass({
|
|||
},
|
||||
|
||||
touchableHandleActivePressOut: function() {
|
||||
this.setOpacityTo(1.0);
|
||||
var childStyle = flattenStyle(this.refs[CHILD_REF].props.style) || {};
|
||||
this.setOpacityTo(childStyle.opacity === undefined ? 1 : childStyle.opacity);
|
||||
this.props.onPressOut && this.props.onPressOut();
|
||||
},
|
||||
|
||||
touchableHandlePress: function() {
|
||||
this.setOpacityTo(1.0);
|
||||
this.props.onPress && this.props.onPress();
|
||||
},
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче