因此，我目前正试图创建一个过滤器，看起来像书籍堆叠，我想实现的一个例子是在下面的链接提供：https://dribbble.com/shots/19300443-Audiobook-App
我尝试过实现网格，但似乎与react native不兼容，并且不起作用-建议将受到高度赞赏！
这是我的代码：

import { ScrollView, StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from 'react-native'

    import React, { useState } from 'react'
    import LibraryBookCard from '../components/libraryBookCard'
    import * as Font from 'expo-font';
    import { globalStyles } from '../utils/GlobalStyles';
    
    const LibraryScreen = () => {
      const [fontLoaded, setFontLoaded] = useState(false);
    
      const loadFonts = async () => {
        await Font.loadAsync({
          'Hensa': require('../assets/fonts/Hensa.ttf'),
        });
        setFontLoaded(true);
      };
    
      React.useEffect(() => {
        loadFonts();
      }, []);
    
      let dummyData = [
        {title: 'The Lighthouse', author: 'Jess Thompson', prompt: "Magic Waterfall", genre: 'Action'},
        {title: 'Growing Pains', author: 'Cassidy Hue', prompt: "Magic Bean", genre: 'Fantasy'},
        {title: 'Lovesick', author: 'Alexa Pea', prompt: "Tinder", genre: 'Romance'},
        {title: 'Masks and Muggles', author: 'Emma Haas', prompt: "Wizardry", genre: 'Fantasy'},
        {title: 'The Magician', author: 'Joshy B', prompt: "Thee Sword", genre: 'Fantasy'},
      ]
      const handleButtonPress = () => {
        console.log("pressed");
      }
    
      return (
        <ImageBackground
          source={require('../assets/bg/general.png')}
          style={styles.backgroundImage}
        >
          {fontLoaded && (
            <View>
              <Text style={styles.heading}>Library</Text>
              <Text style={styles.body}>Let’s find the perfect story for you.</Text>
    
    
              <View style={styles.buttonContainer}>
                <TouchableOpacity style={[styles.book, styles.book1]}>
                <Text style={styles.bookText}>Book 1</Text>
              </TouchableOpacity>
    
              <TouchableOpacity style={[styles.book, styles.book2]}>
                <Text style={styles.bookText}>Book 2</Text>
              </TouchableOpacity>
    
              <TouchableOpacity style={[styles.book, styles.book3]}>
                <Text style={styles.bookText}>Book 3</Text>
              </TouchableOpacity>
    
              
              <TouchableOpacity style={[styles.book, styles.book4]}>
                <Text style={styles.bookText}>Book 4</Text>
              </TouchableOpacity>
    
                        
              <TouchableOpacity style={[styles.book, styles.book5]}>
                <Text style={styles.bookText}>Book 5</Text>
              </TouchableOpacity>
              </View>
    
              <Text style={styles.subHeading}>My Collection</Text>
              <ScrollView style={styles.scrollView}>
                {dummyData.map((project, index) => (
                  <LibraryBookCard key={index} data={project}/>
                ))}
              </ScrollView>
            </View>
          )}
        </ImageBackground>
      )
    }
    
    export default LibraryScreen
    
    const styles = StyleSheet.create({
      backgroundImage: {
        ...StyleSheet.absoluteFillObject,
        paddingLeft: 30,
        paddingRight: 30,
        paddingBottom: 30,
        justifyContent: 'center',
        alignItems: 'center',
        resizeMode: 'cover',
      },
      heading: {
        fontFamily: 'Hensa',
        fontSize: 52,
        color: 'white',
        width: 350,
        paddingTop: 65,
        paddingLeft: 20,
        lineHeight: 50,
      },
      body: {
        color: 'white',
        width: 350,
        paddingLeft: 20,
        paddingTop: 10,
        paddingBottom: 40,
      },
      scrollView: {
        height: 100,
      },
      subHeading:{
        color: 'white',
        fontWeight: 600,
        fontSize: 18,
        paddingLeft: 20,
    
      },
      buttonCcontainer: {
        flex: 1,
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gridTemplateRows: 'repeat(5, 1fr)',
        gridColumnGap: 0,
        gridRowGap: 0,
        alignItems: 'center',
        justifyContent: 'center',
      },
      book1: {
        gridArea: '1 / 1 / 2 / 4',
        backgroundColor: '#B68C4C'
      },
      book2: {
        gridArea: '1 / 4 / 2 / 6',
        backgroundColor: '#9F3824'
      },
      book3: {
        gridArea: '2 / 1 / 5 / 2',
        backgroundColor: '#9F3824'
      },
      book4: {
        gridArea: '4 / 2 / 5 / 6',
        backgroundColor: '#6B8DFF'
      },
      book5: {
        gridArea: '2 / 2 / 4 / 6',
        backgroundColor: '#B68C4C'
      },
    });