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

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 {

  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}/>

  );

}

您可以在此处了解组件（函数或类），并在此处了解关于和其他useState钩子