javascript 如何使 React Native Animated.View 可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32738296/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make React Native Animated.View clickable?
提问by Denny
I'm using this react native tinder demo -> https://github.com/brentvatne/react-native-animated-demo-tinder
我正在使用这个 react native tinder 演示 -> https://github.com/brentvatne/react-native-animated-demo-tinder
Is it possible to make the cards 'clickable' so it would navigate to another view on click? I've tried wrapping the "Touchable" components around the animated view but doing so disables the animations.
是否可以使卡片“可点击”，以便在点击时导航到另一个视图？我尝试将“Touchable”组件包裹在动画视图周围，但这样做会禁用动画。
Any ideas would be highly appreciated, thanks!
任何想法将不胜感激，谢谢！
回答by Oleg Dater
Another method (which worked better for me) is to create AnimatedTouchable component using createAnimatedComponent method of Animated:
另一种方法（对我来说效果更好）是使用 Animated 的 createAnimatedComponent 方法创建 AnimatedTouchable 组件：
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
<AnimatedTouchable onPress={this.onPress}>
stuff here
</AnimatedTouchable>
回答by Nishanth Shankar
I guess you can use TouchableX inside the Animated.View
我猜你可以在 Animated.View 中使用 TouchableX
<Animated.View>
<TouchableOpacity>
<View>
stuff
<View>
</TouchableOpacity>
</Animated.View>`
回答by devoka
What works for me when i tried to make a dismissable bottomsheet by pressing on backdrop
当我试图通过按下背景制作可解雇的底片时，什么对我有用
was this :
这是：
const renderBackdrop = () => {
const animatedBackdropOpacity = Animated.interpolate(fall, {
inputRange: [0, 1],
outputRange: [0.5, 0],
});
return (
<Animated.View
pointerEvents={pointerEvents}
accessibilityViewIsModal
accessibilityLiveRegion="polite"
style={StyleSheet.absoluteFill}>
<TouchableWithoutFeedback onPress={_closeBs}>
<Animated.View
style={[
styles.backdropContainer,
{
opacity: animatedBackdropOpacity,
},
]}
/>
</TouchableWithoutFeedback>
</Animated.View>
);
};
};
Credit goes to React Native Paper Modal Component https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184
归功于 React Native Paper Modal 组件 https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184
回答by ?mer
it's too late but in my case i have set the height of Animated.View less than the content inside it
为时已晚，但在我的情况下，我已将 Animated.View 的高度设置为小于其中的内容
so make sure that the Animated.View height must be greater or equal to the content on which TouchableOpacity is placed
所以请确保 Animated.View 高度必须大于或等于放置 TouchableOpacity 的内容
回答by Niteesh Kumar
In my case it was not working on Android, when I was using
就我而言，当我使用时，它不适用于 Android
import { TouchableOpacity } from 'react-native-gesture-handler'
Use TouchableOpacityprovided by React Native.
使用TouchableOpacity由 React Native 提供。
import { TouchableOpacity } from 'react-native'
const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
<Animated.View>
<AnimatedTouchable onPress={() => this.props.navigation.goBack()}>
<BackButton style={{ height: '100%', width: '100%' }} />
</AnimatedTouchable>
</Animated.View>
回答by Niteesh Kumar
you need to write a method to animate inside the .
您需要编写一个方法来在 .
renderButton: function() {
return (
<TouchableOpacity onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('./myButton.png')}
/>
</TouchableOpacity>
);
},
in top of the render () you need to write the animated style with in this method
在渲染（）的顶部，您需要在此方法中编写动画样式
_onPressButton(){
........
........
}
