大屏幕上的不同 FlatList答案

【问题标题】：Different FlatList on bigger screen大屏幕上的不同 FlatList
【发布时间】：2018-09-03 15:48:54
【问题描述】：

我想在小型和大型设备上拥有相同风格的 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

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

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

【讨论】：