如何在react native中实现网格效果

Question

所以我目前正在尝试创建一个看起来像堆叠的书的过滤器，下面的链接提供了我想要实现的示例： https://dribbble.com/shots/19300443-Audiobook-App

我已经尝试过实施 Grid，但这似乎与 React Native 不兼容并且无法正常工作 - 非常感谢您的建议！

这是我的代码： 从 'react-native' 导入 { ScrollView, StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity}

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'
  },
});