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

【问题标题】：React Native - Setting item width according to the screenReact Native - 根据屏幕设置项目宽度
【发布时间】：2021-07-20 07:56:37
【问题描述】：

我希望每行显示 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}
/>

【问题讨论】：

尝试使用 width: 115, height: 175 with % like width: "30%" 例如
不幸的是这没有帮助:(
由于item组件是一张图片，我猜图片没有给出百分比宽度和高度。

标签： javascript reactjs react-native expo

【解决方案1】：

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

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

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

【讨论】：

我把这个宽度除以3给了图片的宽度，但是不行，对我有什么用？
@MehmetCOŞKUN 好的，你能分享“项目”组件吗？
我发布了组件作为答案。
问题很可能是 TouchableHighlight 的容器，尝试删除 alignItems 看看它的样子

【解决方案2】：

export default function Item(props) {
const { id, type, title, poster, navigation, style } = props;

return (
    <TouchableHighlight
        style={styles.container}
        onPress={() =>
            navigation.navigate(
                type == 'movie' ? 'MovieDetail' : 'SeriesDetail',
                {
                    id,
                    title: title == null ? original_title : title,
                }
            )
        }
    >
        <Image
            style={[{ ...style }, { borderRadius: 5 }]}
            source={{ uri: poster }}
        />
    </TouchableHighlight>
);
}

const styles = StyleSheet.create({
container: {
    alignItems: 'center',
    marginBottom: 18,
    marginLeft: 6,
},
});

【讨论】：