javascript - React Native 布局错误 - ListView 意外呈现

Question

我有一个 ListView 组件，另一个组件有一个谷歌地图搜索框。我想直接在该组件下显示一个列表，但列表顶部或搜索框底部似乎有一些填充，导致两个元素之间出现间隙。

我尝试删除搜索框，很高兴看到 ListView 看起来像预期的那样，列表和标题之间没有间隙。但是当我重新加载页面时，差距再次出现:

Click here to see a quick gif of the bug

下面是这个 View 的代码:

import React from 'react'
var Swipeout = require('react-native-swipeout')

var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete'); 

import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableHighlight,
    Linking,
    AsyncStorage,
    ListView
} from 'react-native'

var styles = StyleSheet.create({
    container: {
        backgroundColor: '#003D40',
        flex: 1,
        marginTop: 65
    },
    buttonText: {
        fontSize: 18,
        color: '#111',
        alignSelf: 'center'
    },
    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: 'white',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        marginTop: 10,
        alignSelf: 'stretch',
        justifyContent: 'center',
        margin: 15,
        marginBottom: 30,
    },
    favorite: {
        color: 'white',
        fontSize: 15
    },
    listContainer: {

    }
})
const dataSource = new ListView.DataSource({ rowHasChanged:(r1, r2) => r1.guid != r2.guid })
class EditFavorites extends React.Component {
    constructor(props) {
        super(props);
        var array = ["1", "2", "3"]
        this.state = {
            dataSource: dataSource.cloneWithRows(array),
        }
    }
    renderRow(rowData, sectionID, rowID) {
        let _ = this
        var swipeoutBtns = [
          {
            text: 'Delete',
            onPress: function() {
            _.setState({
                choppingBlock: rowData 
            });}
          }
        ]
        console.log("rowData", rowData)
        return (
            <Swipeout 
                right={swipeoutBtns}   
            >
              <View>
                 <TouchableHighlight 
                    underlayColor='#dddddd' 
                    style={{height:44}}
                 >
                    <View>
                     <Text 
                        style={{fontSize: 20, color: '#000000', padding: 15, paddingTop: 10}} 
                        numberOfLines={1}>{rowData}</Text>
                    </View>
                </TouchableHighlight>
              </View>
            </Swipeout>
        )
    }
    render() {
        // storage.remove({
        //     key: 'favorites'
        // });
        if(this.state.favorites == []) {
            listArray = array
        } else {
            listArray = this.state.favorites
        }
        return (
            <View style={styles.container}>

              <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} enableEmptySections={true} style={styles.listContainer} />

            </View>

        )
    }
}

module.exports = EditFavorites

Answer 1

您可能需要设置 automaticallyAdjustContentInsets={false}，然后设置您自己的 contentInset 以适应搜索栏:contentInset={{top: 44}} 。