Question

我想在大小型设备上使用相同样式的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'）：

click 5,10' size

click 7,0' size

Answer 1

尝试使用width:dimension.get('screen or window ').Width之类的尺寸道具，您可以对高度使用相同的属性，只需更改道具的高度或宽度并 U还可以像这样添加width:dimension.get('screen or window ').Width/2。U可以对其进行自定义，并且可以在不同屏幕上自行调整视图。...

大屏幕上的不同FlatList

1 个答案: