大家好,今天我试图在我的 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',
},
});
提前感谢您的帮助
我的建议是使用一个 React Native 库来为你做到这一点。有很多图书馆可以帮助你
如果你想自己做,请查看react-native-reanimated 库。这是最好的一个,即使你可以使用 React Native 的 Animated api(如果你愿意)
我写了一篇关于滑动按钮的博客,你可以查看这里
这是根据最新的 SDK 51 的。希望这会有所帮助。