Question

我正在使用react native，这是按钮的动画示例。

我的问题是我正在映射这些按钮，因此如果按下一个按钮，动画将播放所有按钮。我的问题是，如何防止其他按钮播放动画？

我确实尝试过使用一种状态，该状态可以检查当前按下的按钮的索引是否与按钮的索引匹配，但这也无济于事。

这是代码：


import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';

export default class App extends Component {
    constructor(props) {
        super(props);

            this.state = {
                width: 100,
                height: 75,
                index: 0,
                categories: [
                    {
                        "name": "All"
                    },
                    {
                        "name": "News"
                    },
                    {
                        "name": "Sports"
                    },
                    {
                        "name": "Movies"
                    },
                    {
                        "name": "Cartoons"
                    },
                ],
            }

        this.handlePressIn = this.handlePressIn.bind(this);
        this.handlePressOut = this.handlePressOut.bind(this);
    }

    componentWillMount() {
        this.animatedValue = new Animated.Value(1);
    }

    handlePressIn() {
        Animated.spring(this.animatedValue, {
            toValue: .5
        }).start()
    }
    handlePressOut() {
        Animated.spring(this.animatedValue, {
            toValue: 1,
            friction: 3,
            tension: 40
        }).start()
    }
    render() {
        const animatedStyle = {
            transform: [{ scale: this.animatedValue}]
        }
        return (
            <View style={styles.container}>

                {
                    this.state.categories.map((e, index) => {
                        return (
                            <TouchableWithoutFeedback
                                onPressIn={this.handlePressIn}
                                onPressOut={this.handlePressOut} >
                                <Animated.View style={[styles.button, animatedStyle]}>
                                    <Text style={styles.text}>{e.name}</Text>
                                </Animated.View>
                            </TouchableWithoutFeedback>
                        )
                    })
                }


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: "#333",
        width: 100,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#FFF"
    }
});

AppRegistry.registerComponent('App', () => App);

Answer 1

也许您应该为按钮创建一个新的组件，因此它具有自己的动画值，以防止其运行按钮上的所有动画。

Button.js

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';
    export default class Button extends Component {
        constructor(props) {
            super(props);
            this.state = {};
            this.handlePressIn = this.handlePressIn.bind(this);
            this.handlePressOut = this.handlePressOut.bind(this);
        }

        componentWillMount() {
            this.animatedValue = new Animated.Value(1);
        }

        handlePressIn() {
            Animated.spring(this.animatedValue, {
                toValue: .5
            }).start()
        }
        handlePressOut() {
            Animated.spring(this.animatedValue, {
                toValue: 1,
                friction: 3,
                tension: 40
            }).start()
        }
        render() {
            const animatedStyle = {
                transform: [{ scale: this.animatedValue}]
            }
            return (
                <TouchableWithoutFeedback
                     onPressIn={this.handlePressIn}
                     onPressOut={this.handlePressOut} 
                >
                     <Animated.View style={[styles.button, animatedStyle]}>
                              <Text style={styles.text}>{this.props.name}</Text>
                     </Animated.View>
                </TouchableWithoutFeedback>
            );
        }
    }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: "#333",
        width: 100,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#FFF"
    }
});

然后在您的主要js文件中看起来像这样

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableWithoutFeedback, Animated } from 'react-native';
import Button from 'path/to/Button.js';

export default class App extends Component {
    constructor(props) {
        super(props);

            this.state = {
                width: 100,
                height: 75,
                index: 0,
                categories: [
                    {
                        "name": "All"
                    },
                    {
                        "name": "News"
                    },
                    {
                        "name": "Sports"
                    },
                    {
                        "name": "Movies"
                    },
                    {
                        "name": "Cartoons"
                    },
                ],
            }
    }

    render() {
        return (
            <View style={styles.container}>

                {
                    this.state.categories.map((e, index) => {
                        return (
                            <Button name={e.name} />
                        )
                    })
                }


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: "#333",
        width: 100,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
    },
    text: {
        color: "#FFF"
    }
});

AppRegistry.registerComponent('App', () => App);

Answer 2

每个按钮都使用相同的this.animatedValue，因此动画将使用共享值。您可以为每个按钮创建它自己的animationValue。

处理多个按钮的按钮动画

2 个答案: