如何在本机反应中正确管理地图初始状态？

Question

我是 JS/React-native 的新手，我对如何正确管理地图的初始状态有点困惑。

我有以下组件：

import React from 'react';

import { StyleSheet, Text, View, Dimensions} from 'react-native';

import Colors from '../constants/Colors'

import MapView from 'react-native-maps'

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;

const LATITUDE = 53.2274476;

const LONGITUDE = -0.5474525;

const LATITUDE_DELTA = 0.0922;

const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

function myMapsComponent({navigation}) {

  constructor(props) {

    super(props);

    this.state = {

      isLoading: true,

      location: null,

      errorMessage: null,

      region: {

        latitude: LATITUDE,

        longitude: LONGITUDE,

        latitudeDelta: LATITUDE_DELTA,

        longitudeDelta: LONGITUDE_DELTA,

      },

    }

  }

  return (

      <MapView style={{flex: 1}} Initialregion={this.state.region}/>

  );

}

const styles = StyleSheet.create({

});

export default myMapsComponent;

此代码产生错误expected ";" (16:21)，这是构造函数开始的行。我猜问题实际上是我不能使用构造函数，除非它在类而不是函数中？

有人可以在这里指出我正确的方向吗？

Answer 1

你是对的，你不能在函数组件中使用构造函数。你能做的就是选择一个或另一个。一个类组件看起来像这样：class MyMapsComponent extends React.Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; isLoading: true,&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; }&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <MapView style={{flex: 1}} Initialregion={this.state.region}/>&nbsp; &nbsp; );&nbsp; }}还有一个像这样的功能组件：function myMapsComponent({navigation}) {&nbsp; const [isLoading, setLoading] = useState(false);&nbsp; const [region, setRegion] = useState({longitude: LONGITUDE, ...});&nbsp; ...&nbsp; return (&nbsp; &nbsp; &nbsp; <MapView style={{flex: 1}} Initialregion={region}/>&nbsp; );}您可以在此处了解组件（函数或类），并在此处了解关于和其他useState钩子