如何删除列表视图顶部的空白区域？

Question

我已经实现了一个使用react-native-elements的List，但是它始终在顶部有一个空白空间，如果我向下滚动，它可以正常工作，并且基本上是蓝色标题栏下方的第一项。

代码如下：

render() {
        var randomFloat = require('random-float');
        return (
            <View style={{ flex: 1 }}>
                <View style={styles.headerStyle}>
                    <Text style={styles.headerText}>Saldo</Text>
                    <Text style={styles.headerTextBig}>R$ 93,70</Text>
                </View>
                <ScrollView>
                    <View>
                        <List>
                            {
                                list.map((l, i) => (
                                    <ListItem
                                        roundAvatar
                                        key={i}
                                        title={l.name}
                                        subtitle={
                                            <View>
                                                <View style={styles.subtitleView}>
                                                    <Text style={styles.ratingText}>{l.subtitle}</Text>
                                                </View>
                                                <View style={styles.subtitleView}>
                                                    <Text style={styles.ratingText}>{randomFloat(0, 10).toFixed(2)} km</Text>
                                                </View>
                                            </View>
                                        }
                                        avatar={<Avatar
                                            medium
                                            rounded
                                            source={l.avatar_url && { uri: l.avatar_url }}
                                            title={l.name[0]}
                                        />}
                                    />
                                ))
                            }
                        </List>
                    </View>
                </ScrollView>
            </View>
        );
    }

我尝试为其设置样式表样式，但是我不知道要使用哪个属性。

Answer 1

List组件包含默认的marginTop: 20，这会引起间距问题。

因此您可以使用

...
<List containerStyle={{marginTop: 0}}>
...

以覆盖它。