javascript - 大屏幕上的不同 FlatList

问题描述

我想在小型和大型设备上拥有相同风格的 FlatList。

在较小的屏幕上，我在此列表中的项目之间有完全白色的颜色，但在较大的设备上，我看不到这种白色。

如何解决？

我的平面列表

const placeList = props => {
    return (
        <FlatList
            style={styles.listContainer}
            data={props.placesList}
            renderItem={(info) => (
                <ListItem
                    placeName={info.item.name}
                    placeImage={info.item.image}
                    onItemPressed={() => 
                      props.onItemSelected(info.item.key)}
                />
            )}
        />
    );
};

const styles = StyleSheet.create({
    listContainer: {
        width: "100%",
    }
});

这里是我的 ListItem

const listItem = (props) => (
    <TouchableOpacity onPress={props.onItemPressed}>
        <View style={styles.listItem}>
            <Image 
               resizeMode="contain" 
               source={props.placeImage} 
               style={styles.placeImage}
            />
            <Text>{props.placeName}</Text>
        </View>
    </TouchableOpacity>
);

const styles = StyleSheet.create({
    listItem: {
        width: "100%",
        marginBottom: 5,
        padding: 10,
        backgroundColor: "#eee",
        flexDirection: "row",
        alignItems: "center"
    },
    placeImage: {
        marginRight: 8,
        height: 30,
        width: 30
    }
});

这就是它的外观（5,10' vs 7'）：

点击 5,10' 尺寸

点击 7,0' 大小

标签： javascriptcssreact-native

尝试维度道具，就像width:dimension.get('screen or window ').Width您可以使用相同的属性作为高度，只需更改道具高度或宽度，U 也可以width:dimension.get('screen or window ').Width/2像这样添加.. U 可以自定义，并且该视图可以在不同屏幕上自行调整....

javascript - 大屏幕上的不同 FlatList

问题描述

解决方案

推荐阅读