按值和字母对数组进行排序 React Native

我从 firebase 得到一个数组，现在按字母顺序排序。如果一个对象包含“路线”，那么它会得到文本“Bekijk”按钮，否则文本“即将到来”按钮，我想要的是首先显示名称为“Bekijk”的对象，然后其他对象按字母顺序排列，有谁知道这是否可能？

这是我的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, ImageBackground, StatusBar, ScrollView, Dimensions, TouchableOpacity} from 'react-native';
import { Header, Icon,Button,Rating, AirbnbRating  } from 'react-native-elements';
import firebase from 'react-native-firebase';


class routeScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      goverments: [],
    }
}

  getGovermentData = () => {
    let ref = firebase.database().ref('Goverments');
    ref.on('value' , snapshot =>{
        var state = snapshot.val();
        this.setState({
          goverments: state,
        })
        console.log(state);
      })

  }

    componentWillMount(){
      this.getGovermentData(); 
    }



    render() {
      const width = {
       width: (Dimensions.get('window').width / 2),
      };
      return (
        <ScrollView>

          {
            this.state.goverments.sort(function(a, b) {
              if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
              if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
              return 0;
             }).map((item, i) => (
              <View style={[styles.cards, { backgroundColor: (i % 2  == 0) ? '#D1A96E' : '#A58657'  }]}>
              <View style={styles.leftcolum}>
            <Text style={styles.title}>{item.name}</Text>
                <Text style={styles.undertitle}>4km - 5km - 7km</Text>
                <Image source={require('./assets/images/stars.png')} style={styles.stars}/>

                <Button buttonStyle={{
                          backgroundColor: item.routes ? "#3F494B" : "#018786",
                          marginTop: 40,
                          borderRadius: 50,
                      }} title={item.routes ? "Bekijk" : "Coming soon"}
                      onPress={() => item.routes ? this.props.navigation.navigate('Location', {govermentData: item}) : '#'}
                      />

              </View>
              <View style={styles.rightcolum}>
                <Image source={{uri: item.logoUrl}} style={{width: 150, height: 68}}/>
              </View>

            </View>
          ))
        }
    </ScrollView>


      );
    }
  }

  const styles = StyleSheet.create({
    cards:{
      backgroundColor: '#D1A96E',
      borderRadius: 10,
      marginTop: 20,
      marginRight: 10,
      marginLeft: 10,
      paddingLeft: 20,
      paddingRight: 20,
      paddingTop: 20,
      paddingBottom: 20,
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start'
    },
    stars:{
      marginTop: 10,
    },
    leftcolum:{
      width: '50%',
    },
    rightcolum:{
      width: '50%',
      paddingTop:30,
      paddingLeft:10,
    },
    title:{
      fontSize: 17,
      color: '#fff',
      marginTop: 5,
      fontWeight: '800',
    },
    undertitle:{
      fontSize: 12,
      color: '#fff',
      fontWeight: '200',
    },
    button:{
      backgroundColor: '#3F494B',
      borderRadius: 22,
      marginTop: 20,
    },
    valkenburg:{
      backgroundColor: '#A58657',
    },
    gulpen:{
      backgroundColor: '#EBC285',
    },
    logoValkenburg:{
      width: '50%',
      paddingTop:10,
      paddingLeft:10,
    },
    logoGulpen:{
      width: '50%',
      paddingTop:30,
      paddingLeft:10,
    }

  });

  export default routeScreen;

数组结构：

我想要什么：现在数组按字母顺序显示，这很好，我只想在顶部显示政府的对象1，因为它包含价值路线，其他价值路线为空。所以如果它被填满，它必须显示在顶部