Question

我无法点击TouchableOpactity中的Animated.View。你能救我吗？

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

Answer 1

使用“ react-native-gesture-handler”中的TouchableOpacity而不是“ react-native”中的

~~import { TouchableOpacity } from 'react-native';~~

import { TouchableOpacity } from 'react-native-gesture-handler';

Answer 2

我觉得Animated 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>
    )
  }
}

Answer 3

如果使用PanResponder，请参阅此问题以获取更多信息。 TouchableOpacity with parent PanResponder

PS：就我而言，以下内容会使TouchableHighlight无响应。

import { TouchableHighlight } from 'react-native-gesture-handler';

无法使用React native在animated.view中单击TouchableOpacity

3 个答案: