Question

I have a ListView component, and another component that has a google maps searchbox. I'd like to display a list directly under that component, but it seems that there is some padding on the top of the list or bottom of the searchbox that is causing a gap between the two elements.

I tried removing the searchbox, and was happy to see that the ListView looked like expected, with no gap between the list and the header. But when I reload the page, the gap appears again:

Click here to see a quick gif of the bug

Here is the code for this 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}}。

React Native layout bug - ListView is rendering unexpectedly

1 个答案: