因此，我目前正在嘗試創建一個過濾器，看起來像書籍堆疊，我想實現的一個例子是在下面的鏈接提供: 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'
      },
    });

在React Native中，您可以通過使用可用的布局組件并應用適當的樣式來實現網格效果。以下是在React Native中創建網格布局的一般方法:

確定網格結構:確定網格布局的列數和行數。這將幫助您確定網格項目的布局結構和大小。

使用Flexbox:利用React Native中支持的CSS布局系統Flexbox來創建網格布局。Flexbox為以靈活的方式排列項目提供了強大的工具。

選擇一個容器組件:選擇一個合適的容器組件，比如View或ScrollView，來包裝網格項。選擇取決于您是想要一個可滾動的網格還是一個適合屏幕的固定大小的網格。

應用樣式:對容器和網格項目應用適當的樣式，以實現所需的網格效果。要考慮的主要風格包括:

flexDirection:將容器的flexDirection屬性設置為“row”或“column ”,具體取決于您想要基于行的網格還是基于列的網格。

flexWrap:如果需要，將容器的flexWrap屬性設置為“Wrap ”,以允許項目換行到下一行或下一列。

flex:為每個網格項目分配一個flex值，以控制其在網格中的相對大小。例如，您可以在每個網格項目上設置flex: 1以使它們大小相等，或者分配不同的值以實現自定義大小。

寬度和高度:使用寬度和高度屬性指定網格項目的尺寸。您可以設置固定的大小，或者利用基于網格結構的百分比或計算。

邊距和填充:應用適當的邊距和填充值來創建網格項之間的間距。

其他樣式屬性:考慮其他樣式屬性，如border、backgroundColor和borderRadius，以增強網格的外觀。

呈現網格項:在容器組件內部，使用適當的React本地組件(如View、TouchableOpacity或自定義組件)呈現網格項。您可以映射一個數據數組，以動態生成網格項或手動定義它們。

定制網格項目內容:根據您的需求定制每個網格項目中的內容。您可以包含圖像、文本、按鈕或任何其他React本地組件來表示網格中的數據或交互元素。

通過組合這些步驟并應用合適的樣式，您可以在React Native中實現網格效果。嘗試不同的布局、樣式屬性和組件，為您的應用程序創建所需的網格布局。

如果你有更復雜的情況，請閱讀本文-https://medium . com/@ kalebjdavenport/how-to-create-a-grid-layout-in-react-native-7948 f1 a6f 949