如何使用 React-native 根据距离制作过滤器

Posted 2023-02-16

【中文标题】如何使用 React-native 根据距离制作过滤器

【英文标题】：How can I make a filter based in the distance with React-native

【发布时间】：2021-11-22 08:53:52

【问题描述】：

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

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>
   )
 

我怎么也可以做一个距离过滤器？，我已经有了当前位置和其他用户的位置

【问题讨论】：

只要找到当前用户与其他用户的位置差异，并将其存储在数组或对象中。然后对数组进行排序以获得所需的过滤器。您可以使用this 作为参考。

谢谢你，伙计，你帮了很多忙，早上好

【参考方案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>
      )