Question

我正在使用这种反应原生的火种演示 - ＆gt; https://github.com/brentvatne/react-native-animated-demo-tinder

是否可以制作可点击的卡片＆＃39;所以它会导航到点击的另一个视图？我试过包装＆＃34; Touchable＆＃34;动画视图周围的组件，但这样做会禁用动画。

任何想法都将受到高度赞赏，谢谢！

Answer 1

另一种方法（对我而言效果更好）是使用Animated的createAnimatedComponent方法创建AnimatedTouchable组件：

const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

<AnimatedTouchable onPress={this.onPress}>
  stuff here
</AnimatedTouchable>

Answer 2

我猜你可以在Animated.View

中使用TouchableX

<Animated.View>
  <TouchableOpacity>
    <View>
      stuff
    <View>
  </TouchableOpacity>
</Animated.View>`

Answer 3

我的变种。此自定义 AnimatedPressable 也可以在 Animated.View 内使用。

import {Text, Animated, Pressable} from 'react-native'
    
const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
    
export default () => {
  return (
     <AnimatedPressable onPress={()=>alert('test onPress')}>
        <View>
           <Text>{'....'}</Text>
        </View>
     </AnimatedPressable>
  )
}

Answer 4

在我的情况下，当我使用Android时，它不能在Android上运行

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

使用React Native提供的TouchableOpacity。

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>

Answer 5

你需要编写一个方法来在。内部制作动画。

http://127.0.0.1/includes/

在render（）的顶部，您需要使用此方法编写动画样式

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

Answer 6

当我尝试通过按背景幕来制作可弃用的底纸时，对我有用的东西

是这个：

public ActionResult Profile(ProfileViewModel model)
        {
            if (ModelState.IsValid)
            {
                using (VBSContext db = new VBSContext())
                {
                    try
                    {                        
                        User user = db.Users.AsQueryable().FirstOrDefault(c => c.Email == model.Email);
                        user.Name = model.Name;
                        user.Surname = model.Surname;
                        user.UpdatedAt = DateTime.Now;
                        db.SaveChanges();
                        TempData.Add("UserProfileSuccess", "User profile was update successfully.");
                    }
                    catch (Exception ex)
                    {
                        TempData.Add("UserProfileFail", "User profile was not update successfully.");                        
                    }

                    return RedirectToAction("Profile", "Account");
                }
            }
            return View();
        }

};

信贷转到React Native Paper Modal Component https://github.com/callstack/react-native-paper/blob/master/src/components/Modal.tsx#L184

Answer 7

为时已晚，但就我而言，我已将Animated.View的高度设置为小于其中的内容

因此请确保Animated.View高度必须大于或等于放置TouchableOpacity的内容

如何使React Native Animated.View可点击？

7 个答案: