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

Question

我从 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政府位于顶部，因为它包含值(value)路线，而其他值(value)路线为空。所以如果它被填充，它必须显示在顶部

Answer 1

const Goverments = [
  {
    name: 'Valkenburg',
  },
  {
    name: 'Eijsden-Margeaten',
  },
  {
    name: 'Gulpen',
    routes: [],
  },
];
const SortedGoverments = Goverments.sort(function(a, b) {
  if(a.routes) return -1; // new check
  if(b.routes) return 1; // new check
  if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
  if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
  return 0;
});

console.log("Goverments : ", Goverments);
console.log("SortedGoverments : ", SortedGoverments);