Reactネイティブを使用してanimated.viewのTouchableOpacityをクリックできません。

Question

TouchableOpactityのAnimated.Viewをクリックできません。 私を助けることができますか？

<Animated.View> 
 
    <TouchableOpacity> 
 
     <Text>Click Me!!</Text> 
 
    </TouchableOpacity> 
 
</Animated.View>

Answer 1

私はアニメーションAPIは、そのように動作していないと思う、あなたはこのexample and demo in snackでのように別のクラスを作成する必要があります。

import React from 'react'; 
import { Animated, Text, View } from 'react-native'; 

class FadeInView extends React.Component { 
    state = { 
    fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 
    } 

    componentDidMount() { 
    Animated.timing(     // Animate over time 
     this.state.fadeAnim,   // The animated value to drive 
     { 
     toValue: 1,     // Animate to opacity: 1 (opaque) 
     duration: 10000,    // Make it take a while 
     } 
    ).start();      // Starts the animation 
    } 

    render() { 
    let { fadeAnim } = this.state; 

    return (
     <Animated.View     // Special animatable View 
     style={{ 
      ...this.props.style, 
      opacity: fadeAnim,   // Bind opacity to animated value 
     }} 
     > 
     {this.props.children} 
     </Animated.View> 
    ); 
    } 
} 

// You can then use your `FadeInView` in place of a `View` in your components: 
export default class App extends React.Component { 
    render() { 
    return (
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 
     <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}> 
      <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text> 
     </FadeInView> 
     </View> 
    ) 
    } 
}