获取没有地理位置 API React-native 的国家/城市？答案

【问题标题】：Get Country/City without geo location API React-native?获取没有地理位置 API React-native 的国家/城市？
【发布时间】：2017-08-08 14:19:23
【问题描述】：

有没有办法在移动设备上找到客户的位置？例如，如果用户打开应用程序，我如何才能知道他们的大概位置？

例如，如果用户来自旧金山加利福尼亚州，它将有一些类型标识符让我知道该用户来自旧金山加利福尼亚州。我真的不需要他们的确切位置，只需要县或一般原产地。

我有一个参考：This SO Question .我们可以在 React-native 中以某种方式实现相同的功能吗？

【问题讨论】：

标签： react-native geolocation

【解决方案1】：

当然。根据该线程中的一个答案，您可以像这样在 React Native 中实现 -

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      countryName: '',
      regionName: ''
    };
  }

  componentDidMount() {
    var url = 'https://freegeoip.net/json/';
    fetch(url)
      .then((response) => response.json())
      .then((responseJson) => {
        //console.log(responseJson);
        this.setState({
          countryName: responseJson.country_name,
          regionName: responseJson.region_name
        });
      })
      .catch((error) => {
       //console.error(error);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Country: {this.state.countryName}</Text>
        <Text>Region: {this.state.regionName}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

【讨论】：

非常感谢。你介意解释一下.then((response) => response.json()) .then((responseJson) => { 吗？
response.json() 返回响应的 JSON 数据并传递给then promise。你可以在这里找到更多信息developer.mozilla.org/en-US/docs/Web/API/Body/json
嗨@vinayr，我使用了你的聪明解决方案，但它让我返回这个错误：React-Native fetch, Network request failed 你知道为什么吗？我试图用 http 删除 https 但没有。
您的解决方案使用设备 IP 地址找到响应？
不再推荐。 "此 API 端点已弃用，将于 2018 年 7 月 1 日停止工作。有关更多信息，请访问：github.com/apilayer/freegeoip#readme"

【解决方案2】：

首先使用react-native-public-ip获取公网IP，然后使用api.ipstack.com

export const getUserCurrentCountry = () => async (dispatch) => {
  let res;
  try {
    const ACCESS_KEY = 'IPSTACK_ACCESS_KEY_HERE';
    const publicIpAddress = await publicIP();
    const url = `http://api.ipstack.com/${publicIpAddress}?access_key=${ACCESS_KEY}&format=1`;
    res = await fetch(url)
    res = await res.json();
    return res;
  } catch ({message}) {
    return null;
  }
};

结果将采用这种格式

{
  "ip":"",
  "type":"ipv4",
  "continent_code":"AS",
  "continent_name":"Asia",
  "country_code":"PK",
  "country_name":"Pakistan",
  "region_code":"SD",
  "region_name":"Sindh",
  "city":"Karachi",
  "zip":"74000",
  "latitude":24.882999420166016,
  "longitude":67.05799865722656,
  "location":{
    "geoname_id":1174872,
    "capital":"Islamabad",
    "languages":[
      {
        "code":"en",
        "name":"English",
        "native":"English"
      },
      {
        "code":"ur",
        "name":"Urdu",
        "native":"\u0627\u0631\u062f\u0648",
        "rtl":1
      }
    ],
    "country_flag":"http:\/\/assets.ipstack.com\/flags\/pk.svg",
    "country_flag_emoji":"\ud83c\uddf5\ud83c\uddf0",
    "country_flag_emoji_unicode":"U+1F1F5 U+1F1F0",
    "calling_code":"92",
    "is_eu":false
  }
}

【讨论】：

嘿，react-native-public-ip 不返回数据