如何在平面串列中設定不同的專案樣式？

大家好，我在為平面串列中的每個專案設定樣式時遇到問題。我在stackoverflow上發現你必須在渲染項中使用索引，但在渲染項中我有一個包含我所有專案的組件。

我想要達到的是這個結果：

這是我在 home 組件中的代碼：

import React, {useEffect, useState} from 'react';
import {
  FlatList,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {Audio, Book} from '../types';
import customData from '../books.json';
import BookBox from '../components/BookBox';
import Menu from 'react-native-vector-icons/Entypo';
import Glass from 'react-native-vector-icons/Entypo';

export default function HomeScreen() {
  const [books, setBooks] = useState<Book[]>([]);
  const [audio, setAudio] = useState<Audio[]>([]);
  const [selected, setSelected] = useState(false);
  const [selectedAudio, setSelectedAudio] = useState(false);

  useEffect(() => {
    setBooks(customData);
  }, []);

  const renderBooks = ({item}: {item: Book}) => <BookBox book={item} />;

  return (
    <ScrollView nestedScrollEnabled={true} style={styles.scrollContainer}>
      <View style={styles.searchContainer}>
        <Menu name={'menu'} size={30} color={'black'} />
        <Text style={styles.textSearch}>All Books</Text>
        <Glass name={'magnifying-glass'} size={30} color={'black'} />
      </View>
      <View style={styles.AudioOrEbookContainer}>
        <Pressable
          onPress={() => setSelected(!selected)}
          style={{backgroundColor: selected ? 'white' : 'transparent'}}>
          <View style={styles.btn}>
            <Text>Ebook</Text>
          </View>
        </Pressable>

        <Pressable
          style={{backgroundColor: selectedAudio ? 'white' : 'transparent'}}>
          <View style={styles.btn}>
            <Text>Audiobook</Text>
          </View>
        </Pressable>
      </View>
      <View style={styles.container}>
        <FlatList
          data={books}
          keyExtractor={item => item.id?.toString()}
          renderItem={renderBooks}
          numColumns={2}
        />
      </View>
    </ScrollView>
  );
}

這是我在 BookBox 組件中的代碼：

import {Text, Image, StyleSheet, View, TouchableHighlight} from 'react-native';
import React from 'react';
import {Book} from '../types';
import {useNavigation} from '@react-navigation/native';

interface Props {
  book: Book;
}

export default function BookBox({book}: Props) {
  const {
    author,
    country,
    imageLink,
    language,
    link,
    pages,
    title,
    year,
    overview,
    vote,
  } = book;
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      {imageLink && (
        <TouchableHighlight
          onPress={() =>
            navigation.navigate('SingleBook', {
              title,
              year,
              pages,
              link,
              language,
              imageLink,
              country,
              author,
              overview,
              vote,
            })
          }>
          <Image
            style={styles.image}
            source={{
              uri: `${imageLink}`,
            }}
          />
        </TouchableHighlight>
      )}
      {!imageLink && <Text>immagine mancante</Text>}

      <View style={styles.wrap}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.title}>{author}</Text>
      </View>
    </View>
  );
}

我正在嘗試渲染具有獨特風格的專案，如上圖所示。你能幫我嗎？預先謝謝你

uj5u.com熱心網友回復：

所以，numColumnsofFlatList不能幫助你實作你想要的行為。這是因為此屬性不支持砌體，換句話說，numColumns為同一行的每個專案設定相同的高度。作為實作此行為的一種手段，您可以檢查此庫：https ://github.com/hyochan/react-native-masonry-list

標籤：css反应打字稿反应式

上一篇：如何在本機反應中使用content://渲染影像

下一篇：c++執行期語意