如何在React Native中制作按钮向右滑动和向左滑动的动画?

问题描述 投票:0回答:2

大家好,今天我试图在我的 React Native 项目中添加一个动画,我想让我的右键向左滑动,左键向右滑动。我想做一个平滑的幻灯片,这会很棒,你能帮我吗? 这是我的代码:

import React, {useEffect, useState} from 'react';
import {
  Dimensions,
  Pressable,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {Book} from '../types';
import BooksList from '../json/books.json';
import AudiosList from '../json/audios.json';
import Menu from 'react-native-vector-icons/Entypo';
import Glass from 'react-native-vector-icons/Entypo';
import {ScrollView} from 'react-native-gesture-handler';
import AudioBox from '../components/AudiosBooksBox';

export default function HomeScreen() {
  const [books, setBooks] = useState<Book[]>([]);
  const [audios, setAudios] = useState<Book[]>([]);
  const [selectedBooks, setSelectedBooks] = useState(false);
  const [selectedAudio, setSelectedAudio] = useState(false);

  useEffect(() => {
    setBooks(BooksList);
    setAudios(AudiosList);
  }, []);

  const grand = Dimensions.get('window').width / 2;

  return (
    <ScrollView style={styles.scrollContainer}>
      <View style={styles.searchContainer}>
        <Menu name={'menu'} size={30} color={'#1C0D45'} />
        <Text style={styles.textSearch}>All Books</Text>
        <Glass name={'magnifying-glass'} size={30} color={'#1C0D45'} />
      </View>
      <View style={styles.AudioOrEbookContainer}>
        <Pressable
          onPress={() => {
            setSelectedBooks(!selectedBooks);
            setSelectedAudio(false);
          }}
          style={selectedBooks ? styles.btn2 : styles.btn}>
          <View>
            <Text style={styles.AorBText}>Ebook</Text>
          </View>
        </Pressable>

        <Pressable
          onPress={() => {
            setSelectedAudio(!selectedAudio);
            setSelectedBooks(false);
          }}
          // style={{backgroundColor: selectedAudio ? 'white' : 'transparent'}}
          style={selectedAudio ? styles.btn2 : styles.btn}>
          <View>
            <Text style={styles.AorBText}>Audiobook</Text>
          </View>
        </Pressable>
      </View>
      <SafeAreaView style={styles.container}>
        {selectedBooks && (
          <View style={{flexDirection: 'row'}}>
            <View>
              {books
                .filter((_, i) => i % 2 === 0)
                .map(book => (
                  <AudioBox
                    width={grand}
                    key={book.id}
                    aspectRatio={book.aspectRatio}
                    title={book.title}
                    author={book.author}
                    imageLink={book.imageLink}
                    country={book.country}
                    overview={book.overview}
                    vote={book.vote}
                    duration={book.duration}
                    actor={book.actor}
                    year={book.year}
                    pages={book.pages}
                    link={book.link}
                    language={book.language}
                  />
                ))}
            </View>
            <View>
              {books
                .filter((_, i) => i % 2 !== 0)
                .map(book => (
                  <AudioBox
                    width={grand}
                    key={book.id}
                    aspectRatio={book.aspectRatio}
                    title={book.title}
                    author={book.author}
                    imageLink={book.imageLink}
                    country={book.country}
                    overview={book.overview}
                    vote={book.vote}
                    duration={book.duration}
                    actor={book.actor}
                    year={book.year}
                    pages={book.pages}
                    link={book.link}
                    language={book.language}
                  />
                ))}
            </View>
          </View>
        )}

        {selectedAudio && (
          <View style={{flexDirection: 'row'}}>
            <View>
              {audios
                .filter((_, i) => i % 2 === 0)
                .map(audio => (
                  <AudioBox
                    width={grand}
                    key={audio.id}
                    aspectRatio={audio.aspectRatio}
                    title={audio.title}
                    author={audio.author}
                    imageLink={audio.imageLink}
                    country={audio.country}
                    overview={audio.overview}
                    vote={audio.vote}
                    duration={audio.duration}
                    actor={audio.actor}
                    year={audio.year}
                    pages={audio.pages}
                    link={audio.link}
                    language={audio.language}
                  />
                ))}
            </View>
            <View>
              {audios
                .filter((_, i) => i % 2 !== 0)
                .map(audio => (
                  <AudioBox
                    width={grand}
                    key={audio.id}
                    aspectRatio={audio.aspectRatio}
                    title={audio.title}
                    author={audio.author}
                    imageLink={audio.imageLink}
                    country={audio.country}
                    overview={audio.overview}
                    vote={audio.vote}
                    duration={audio.duration}
                    actor={audio.actor}
                    year={audio.year}
                    pages={audio.pages}
                    link={audio.link}
                    language={audio.language}
                  />
                ))}
            </View>
          </View>
        )}
      </SafeAreaView>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollContainer: {
    backgroundColor: 'white',
  },
  container: {
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  searchContainer: {
    marginTop: 100,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  btn: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    borderRadius: 10,
    height: 40,
    width: '47%',
  },
  btn2: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    height: 40,
    width: '47%',
  },

  AudioOrEbookContainer: {
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'lightgray',
    height: 50,
    width: '80%',
    marginLeft: 35,
    borderRadius: 10,
  },
  AorBText: {
    color: '#1C0D45',
    fontWeight: '700',
    fontSize: 17,
  },

  textSearch: {
    fontSize: 30,
    color: '#1C0D45',
  },
});

我的按钮是这样的:

提前感谢您的帮助

typescript react-native animation react-native-animatable
2个回答
0
投票

我的建议是使用一个 React Native 库来为你做到这一点。有很多图书馆可以帮助你

如果你想自己做,请查看react-native-reanimated 库。这是最好的一个,即使你可以使用 React Native 的 Animated api(如果你愿意)


0
投票

我写了一篇关于滑动按钮的博客,你可以查看这里

这是根据最新的 SDK 51 的。希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.