kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-25 21:05:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

[TouchableOpacity] Reset opacity to the inactiveValue rather than always 1.0

Browse Source 
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:
Brent Vatne
2015-05-06 17:02:03 -07:00
parent 47164baaec
commit 0b844feedb
1 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Libraries/Components/Touchable/TouchableOpacity.js
View File

@@ -20,6 +20,7 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
var cloneWithProps = require('cloneWithProps'); var cloneWithProps = require('cloneWithProps');
var ensureComponentIsNative = require('ensureComponentIsNative'); var ensureComponentIsNative = require('ensureComponentIsNative');
var flattenStyle = require('flattenStyle');
var keyOf = require('keyOf'); var keyOf = require('keyOf');
var onlyChild = require('onlyChild'); var onlyChild = require('onlyChild');
@@ -105,12 +106,12 @@ var TouchableOpacity = React.createClass({
}, },
touchableHandleActivePressOut: function() { 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(); this.props.onPressOut && this.props.onPressOut();
}, },
touchableHandlePress: function() { touchableHandlePress: function() {
this.setOpacityTo(1.0);
this.props.onPress && this.props.onPress(); this.props.onPress && this.props.onPress();
}, },