首页 > 解决方案 > 使用 react-native-reanimated 的按钮滑动效果

问题描述

我有一个映射按钮列表并将它们显示给用户的视图,然后用户可以选择要查看的视图。

它使用一个列表,因为这个组件在多个视图中使用并且按钮是不同的。

当用户在这些按钮之间切换但没有成功时,我想创建一个滑动效果。我使用了“react-native-reanimated”,但我无法让它工作

任何想法或建议如何制作这种滑动效果?

谢谢

    updateView(value) {
        this.props.changeView(value);
        this.setState({ selected: value });
    }
    render() {

        let {buttonsList} = this.props
        let {selected } = this.state
        

        return (
                    <View style={routinesStyles.ButtonsContainer}>
                        {buttonsList.map((item) => (
                            <TouchableHighlight
                                onPress={() => this.updateView(item.value)}
                                style={ selected === item.value ? routinesStyles.selected : routinesStyles.notSelected }>
                            >
                                <Text>{item.label}</Text>
                            </TouchableHighlight>
                        ))}
                    </View>
        );
    }
}

类似于此https://youtu.be/i20R4lwkJzw

标签: react-nativejsxreact-native-reanimated

解决方案


推荐阅读