如何使用 React-native 制作基于距离的过滤器

Question

我需要为我的应用程序创建一个距离过滤器，比如从用户城市获取用户，比如在 tinder 距离半径内，我该怎么做？这是我现在的页面代码

getUsers = async() => {
    try{
        const response = await api.get('/auth/list')

        const { users } = response.data
        console.log({users})

        this.setState({ users })
    }catch(response){
        this.setState({ errorMessage: response.data.error })
        console.log(response.data.error)
    } 
  }


 async componentDidMount(){
  this.getUsers()
 }

 render() {
   return(
     <View>
       {!!this.state.errorMessage && <Text>{ this.state.errorMessage }</Text>}
       {this.state.users.filter(user => user.speciality === 'Dermatologista').map(user => (
          <View key={user._id} style={{marginTop: 15, alignItems: 'center'}}>
            <Text style={{fontWeight: 'bold', fontSize:20}}>{user.title}</Text>
            <Text>{user.speciality}</Text>
            <Button   title = 'View Profile'onPress ={() => this.props.navigation.navigate('Profile', {
               name: user._id
               
            })}/>
            </View>
        ))}
     </View>
   )
 }
}

我怎样才能做一个距离过滤器呢？，我已经有了当前位置和其他用户的位置

Answer 1

答案很简单，您只需创建一个区域数组并执行以下操作

这将获取用户位置

 navigator.geolocation.getCurrentPosition(
        ({coords: {latitude, longitude}}) => {
          this.setState({region: {latitude, longitude,latitudeDelta:0.0, 
 longitudeDelta:0.005,}})
        }, //sucesso
        () => {}, //erro
        {
          timeout: 2000,
          enableHighAccuracy: true,
          maximumAge: 1000,
        }
      )
    }
    
    render(){
      const users = this.state.users
      console.log(users)

这是过滤器

      return(
        <View style={styles.container}>
          <ScrollView>
          {!!this.state.errorMessage && <text>{this.state.errorMessage}</text>}
          {this.state.users.filter(user => user.speciality === 'Hospital' && 
           user.latitude > this.state.region.latitude - .2 &&
           user.latitude < this.state.region.latitude + .2 && user.longitude > 
            this.state.region.longitude -.2 &&
           user.longitude < this.state.region.longitude + .2
           ).map(user => (
              <View key={user._id} style={{marginTop: 15, alignItems: 
               'center'}}>
                <Text style={{fontWeight: 'bold', fontSize:20}}>{user.title} 
                </Text>
                <Text>{user.speciality}</Text>
                <Button   title = 'View Profile'onPress ={() => 
                this.props.navigation.navigate('Profile', {
                   name: user._id
                   
                })}/>
                </View>
            ))}
          </ScrollView>
         
    
        </View>
      )
    }
      
    
    }

如何使用 React-native 制作基于距离的过滤器

How can I make a filter based in the distance with React-native

mobile

react-native

react-native-maps