Reactネイティブレイアウトのバグ - ListViewが予期せずレンダリングされています

Question

私はListViewコンポーネントと、Googleマップの検索ボックスを持つ別のコンポーネントを持っています。そのコンポーネントの直下にリストを表示したいと思いますが、リストの上部または検索ボックスの下部に、2つの要素の間にギャップを生じさせるパディングがあるようです。

検索ボックスを削除しようとしましたが、リストとヘッダーの間にギャップがなく、期待どおりのListViewが表示されていることがわかりました。私はページをリロードするときしかし、ギャップが再び表示されます。ここでは

Click here to see a quick gif of the bug

は、このビューのコードです：

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}}。