javascript - React Native - 根据屏幕设置项目宽度

Question

我希望每行出现 3 个项目，并且希望根据屏幕本身调整它们的大小，我该怎么做？

我尝试将 justifyContent 提供给 flatlist columnWrapperStyle 道具，但显示结果很荒谬

const renderSearchItem = ({
    item: { id, type, title, original_title, poster },
}) => (
    <Item
        id={id}
        type={type}
        title={title == null ? original_title : title}
        poster={poster}
        navigation={navigation}
        style={{ width: 115, height: 175 }}
    />
);

<FlatList
    data={data?.datas}
    renderItem={renderSearchItem}
    keyExtractor={(item, index) => index.toString()}
    key={search}
    numColumns={3}
    onEndReachedThreshold={1}
    onEndReached={() => {
        fetchMore({
            variables: {
                search,
                offset: data?.datas?.length + 18,
            },
            updateQuery: (
                previousResult,
                { fetchMoreResult }
            ) => {
                if (
                    !fetchMoreResult ||
                    fetchMoreResult?.datas?.length === 0
                ) {
                    return previousResult;
                }

                return {
                    datas: previousResult?.datas?.concat(
                        fetchMoreResult?.datas
                    ),
                };
            },
        });
    }}
    ListHeaderComponent={headerComponent()}
    showsVerticalScrollIndicator={false}
/>

标签： javascriptreactjsreact-nativeexpo

Answer 1

您可以从尺寸中获取屏幕的宽度。

const width = Dimensions.get('screen').width

这将是应用程序运行的宽度大小。