{...this.panResponder.panHandlers}                   style={[styles.mainBtn, this.props.style, {opacity:opacity}]}> 

                    {image}                

                </Animated.View> 

            </View> 

        ) 

    } 

} 

Button.propTypes = { 

    onLongPress: PropTypes.func, 

    onPressOut: PropTypes.func, 

    onPress: PropTypes.func, 

    style: PropTypes.object, 

    image: PropTypes.object 

}; 

Button.defaultProps = { 

    onPressOut: ()=>{ console.log('onPressOut is not defined'); }, 

    onLongPress: ()=>{ console.log('onLongPress is not defined'); }, 

    onPress: ()=>{ console.log('onPress is not defined'); }, 

    style: {}, 

    image: null 

}; 

const styles = { 

    mainBtn:{ 

        width:55, 

        height:55, 

        backgroundColor:'rgb(255,255,255)',   

    } 

}; 

首先，初始化PanResponder对象实例。它有一套不同的操作句柄。我感兴味的是onPanResponderGrand(当用户触摸按钮时触发)和onPanResponderRelease(当用户从屏幕上移开手指时触发)两个句柄;

我还设置了一个动画对象实例，协助我们处置动画。将其值设置为零;然后我们定义_setOpacity办法，调用时改动this.opacityAnimated的值。在渲染之前，我们插入this.opacityAnimated为正常的opacity值。我们不运用View而是运用Animated.View模块为了运用静态变化的opacity值。

经过下面的例子，你会发现Animated API不难了解，你只需求阅读相关的API文档，以确保你的运用顺序完美运转。希望这个例子能帮你开个好头。

在运用React Native开发时能够会遇到很多成绩，希望这篇文章能协助你避免一些错误。

【编辑引荐】

在 Node 的协助下，横跨多平台的 JavaScript 曾经赢了

扼杀功用的10个常见Hibernate错误

StackOverflow数据剖析：JavaScript框架的残酷生命周期

从2017年 Java 市场需求看顺序员风景背后的危机！

编写高功用Java代码的最佳实际

(责任编辑：admin)