Javascript 如何在react native中正确管理映射的初始状态？

我是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;

从“React”导入React；
从“react native”导入{样式表、文本、视图、维度}；
从“../constants/Colors”导入颜色
从“react native maps”导入地图视图
const{width，height}=Dimensions.get（'window'）；
常量纵横比=宽度/高度；
常数纬度=53.2274476；
常数经度=-0.5474525；
常数纬度δ=0.0922；
常数经度_δ=纬度_δ*纵横比；
函数myMapsComponent（{navigation}）{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
位置：空，
errorMessage:null，
地区：{
纬度：纬度，
经度：经度，
纬度三角洲：纬度三角洲，
经度三角洲：经度三角洲，
},
}
}
返回(
);
}
const styles=StyleSheet.create({
});
导出默认myMapsComponent；

此代码生成错误

预期“；”（16:21）

，这是构造函数开始的行。我猜问题实际上是我不能使用构造函数，除非它在类而不是函数中

---

有人能给我指出正确的方向吗？

你说得对，你不能在函数组件中使用构造函数

你能做的就是选择其中之一。 类组件如下所示：

class MyMapsComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      ...
    }
  }

  render() {
    return (
        <MapView style={{flex: 1}} Initialregion={this.state.region}/>
    );
  }
}

function myMapsComponent({navigation}) {
  const [isLoading, setLoading] = useState(false);
  const [region, setRegion] = useState({longitude: LONGITUDE, ...});
  ...


  return (
      <MapView style={{flex: 1}} Initialregion={region}/>
  );

}

类MyMapsComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
...
}
}
render（）{
返回(
);
}
}

还有一个功能组件，如下所示：

class MyMapsComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      ...
    }
  }

  render() {
    return (
        <MapView style={{flex: 1}} Initialregion={this.state.region}/>
    );
  }
}

function myMapsComponent({navigation}) {
  const [isLoading, setLoading] = useState(false);
  const [region, setRegion] = useState({longitude: LONGITUDE, ...});
  ...


  return (
      <MapView style={{flex: 1}} Initialregion={region}/>
  );

}

函数myMapsComponent（{navigation}）{
const[isLoading，setLoading]=useState（false）；
const[region，setRegion]=useState（{经度：经度，…}）；
...
返回(
);
}

---

您可以了解组件（函数或类），以及有关

useState

和其他钩子的知识

为什么要在函数组件中使用构造函数？检查函数和类组件之间的差异。@JuanMarco我在问题中确实说过“我猜问题实际上是我不能使用构造函数，除非它在类而不是函数中”。我想了解更多关于如何将代码调整为类/功能组件的指导，如公认的答案。谢谢。快速提问，我的导航是否仍然可以使用类组件？我注意到它在代码片段中的任何地方都没有提到？它在构造函数中作为道具传递，这样您就可以在任何需要它的地方编写

this.props.navigation

。