Question

我将以此为开头说我是React的新手UX设计器。

我正在使用Expo / React-Native，并使用“位置”功能来获取设备的位置信息。我可以使用以下方法将信息返回到JSON对象中：

const { height, width } = Dimensions.get("window");
class Explore extends Component {
 static navigationOptions = {
header: null
};

state = {
locationResult: ""
};

componentDidMount() {
this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") {
      this.setState({
        locationResult: "Permission to access location was denied"
      });
    }

let location = await Location.getCurrentPositionAsync({});
let geocode = await Location.reverseGeocodeAsync(location.coords);
this.setState({ locationResult: JSON.stringify(geocode) });
  };

在渲染中，我使用以下方法调用该值：

    <WelcomeText>
            Discover {this.state.locationResult}
          </WelcomeText>

哪个返回对象：

[{"street":"Stockton St","city":"San Francisco","region":"CA","country":"United States","postalCode":"94108","isoCountryCode":"US","name":"1 Stockton St"}]

但是我该如何只显示对象中“城市”的值呢？

Answer 1

尝试一下：

<WelcomeText>
     Discover {this.state.locationResult[0].city}
</WelcomeText>

说明：

您的this.state.locationResult是一个对象数组。使用this.state.locationResult[0]，我们正在访问第一个对象。然后，我们可以使用.运算符来访问所需的属性。对于您的情况.city

编辑： 您需要传递地理编码而不对其进行字符串化处理，否则您将无法像我上面描述的那样访问它。 reverseGeocodeAsync已经在返回对象数组，无需将其转换为字符串。

替换：

this.setState({ locationResult: JSON.stringify(geocode) });

具有：

this.setState({ locationResult: geocode });

Edit2：

这是一个有效的示例：https://snack.expo.io/B1SqSd3iN

显示JSON对象中的一个值对

1 个答案: