React 네이티브 레이아웃 버그 - ListView가 예기치 않게 렌더링됩니다.

Question

ListView 구성 요소와 Google지도 검색 창이있는 다른 구성 요소가 있습니다. 해당 구성 요소 바로 아래에 목록을 표시하고 싶지만 두 개의 요소 사이에 간격을 두는 검색 창의 목록이나 맨 위에 여백이있는 것 같습니다.

검색 상자를 제거해 보았습니다. 목록과 헤더 사이에 틈이 없어서 ListView가 예상 한 것처럼 보이기 때문에 기뻤습니다. 내가 페이지를 다시로드 때, 격차가 다시 나타납니다 : 여기

Click here to see a quick gif of the bug

은이보기에 대한 코드입니다 : 당신은 아마 automaticallyAdjustContentInsets={false}를 설정해야

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

다음 contentInset을 자신하는 것은 수용 할 수 있도록 설정 검색 바 : contentInset={{top: 44}}.