Альтернатива сетки в Native Native ⇐ CSS

[Anonymous]

Итак, я в настоящее время пытаюсь создать фильтр, который выглядит как сложенные книги, пример того, чего я хочу достичь, приведен в ссылке, реже:
https://dribbble.com/shots/19300443-aud ... appобразно оценен! < /p>
Это мой код: < /p>
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 (

{fontLoaded && (

Library
Let’s find the perfect story for you.



Book 1



Book 2



Book 3



Book 4



Book 5



My Collection

{dummyData.map((project, index) => (

))}


)}

)
}

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


Подробнее здесь: https://stackoverflow.com/questions/762 ... act-native