FlatList不会向下滚动到末尾

Question

我的本​​机代码中有一个清单。它不会一直向下滚动。我想向下滚动直到结尾，但是当我尝试向下滚动时，它又重新回到了上面。下面是我的完整代码和样式表：

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: .9,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  _renderItem = ({item, index}) => {

    var destUrl = 'https://www.google.com/maps/dir/Current+Location/' + item.addr;
    var geodist = require('geodist')
    var dist = geodist({lat: item.cLat, lon:item.cLong}, {lat: item.LatL, lon: item.Long2}, 'mi')


  var imagevar =  item.image;


   if (isNaN(dist)) {
    dist = 0;
}


        return(



            <View style={{ backgroundColor: index %2 ===0? '#DDBC95':'#EBDCB2'}} >
                   <View style={{ flexDirection: 'row', alignItems:'center' }}>
                   <Image source={Icons[imagevar]} style = {styles.imageView}/>

                 <View style={{  flex: 1, alignItems: "center"}}>
                        <Text  style={styles.Address1}>{item.addr} </Text>
                        <View style={styles.phoneImg}>
                            <TouchableOpacity
                                  onPress={() => { this.handleClick(`tel:${item.phone}`)}}>
                                      <Image source={require('../images/Phone.png')} style={styles.actionImage}/>
                             </TouchableOpacity>
                            <Text style={styles.Address1}>{item.phone}</Text>
                        </View>

                          <View style={styles.AddressRow}>
                            {
                                    item.Online != ''? <TouchableOpacity  onPress={() => Linking.openURL(  item.Online )}>
                                      <Image source={require('../images/www-icon.png')} style={styles.actionImage1}/>
                                      </TouchableOpacity>: null 

                             }


                          <TouchableOpacity  onPress={() => Linking.openURL(item.Online)}>
                                            <Text style={styles.underLineText}>Online</Text>
                         </TouchableOpacity>

                        <TouchableOpacity  onPress={() => Linking.openURL(destUrl)}>
                                      <Text style={styles.underLineText}>Directions</Text>
                          </TouchableOpacity>


                                 <Text style={styles.AddressSpace} >Miles:{dist}</Text>

                                </View>
                  </View>

            </View>
           </View>


        );

  }

  componentDidCatch
render()
  {

   var x =  this.props.navigation.state.params.item.id ;
   var newList = ServiceDetails.filter(obj => obj.fk === x)


      return(

<View >

 <View>

        <Text  style={styles.title}>{this.props.navigation.state.params.item.ser}</Text>
       <Text style={styles.SerContent} >Services are available in the following locations:</Text>
   </View>

  <View>
  <FlatList

  data={newList.sort((a, b) => {
    var geodist = require('geodist')
    const aDist = geodist(
      { lat: a.cLat, lon: a.cLong },
      { lat: a.LatL, lon: a.Long2 },
      "mi"
    );
    const bDist = geodist(
      { lat: b.cLat, lon: b.cLong },
      { lat: b.LatL, lon: b.Long2 },
      "mi"
    );

    return aDist - bDist;
  })}


  ItemSeparatorComponent = {this.FlatListItemSeparator}
     renderItem={this._renderItem}
     keyExtractor={(item, index) => index}
    />


</View>
</View>
)




  }
}

const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10

},

item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  container2:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15
    },
    underLineText: {
      fontSize: 17,
      textDecorationLine: 'underline',
      color: 'black',

      alignSelf: 'center',
      marginLeft: 20,
      paddingTop:10

    },

    underLineTextOnline: {
      fontSize: 17,
      textDecorationLine: 'underline',
      color: 'black',

      alignSelf: 'center',
      marginLeft: 20,
      paddingTop:5

    },

    title:{
      justifyContent: 'center',
      paddingTop: 10,
      alignItems: 'center',
      alignSelf: 'center',
      fontWeight: 'bold',
      fontSize: 22,
      color: 'black',

      },

      Address1:{
        alignSelf: 'center',
        marginRight: 20,
        fontSize: 19,
        fontWeight:'bold',
        fontWeight: 'bold',
        color: 'black'
    },
    SerContent:{
      fontWeight: 'bold',
      fontSize: 16,
      paddingTop: 10,
      alignSelf: 'center',
      color: 'black',
      paddingBottom: 10
  },
  Address1:{
    alignSelf: 'center',
    marginRight: 20,
    fontSize: 15,
    flexDirection:'column',
    color: 'black',
    marginLeft:10,
    textAlignVertical:'center'
},

AddressRow:{
  alignSelf: 'center',
  marginRight: 20,
  fontSize: 15,
  flexDirection: 'row',
  color: 'black'
},

phoneImg:{

  flexDirection: 'row',
  alignSelf: 'center',
  textAlignVertical:'center'
},
AddressSpace:{
  alignSelf: 'center',
  marginLeft: 20,
  fontSize: 15,
  marginLeft: 20,
  paddingTop:5,
  color: 'black'

},

actionImage:{
  flex:0,
  height:30,
  width:30,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center',
  marginTop:10,
  alignSelf:'center',
  flexDirection:'column',
  textAlignVertical:'center'
},

sepBoxes:{
  flex: 1,
  flexDirection: 'column'

},
box: {
  height: 55,
  width:400,


},
box1: {
  backgroundColor: 'white'
},

actionImage1:{
  flex:0,
  height:40,
  width:40,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center',
  paddingLeft:5,
  alignSelf:'center',
  flexDirection:'column'
},

imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7

},
textView: {

  width:'50%', 
  textAlignVertical:'center',
  padding:10,
  color: '#000'

}



});

AppRegistry.registerComponent('ServiceListDetails', () => ServiceListDetails);

上面的代码具有所有样式表和完整的代码。

任何帮助将不胜感激。