ネイティブ反応にどのように正しくマップ初期状態を管理するには?

カッター:

私はJSに新たなんだ/ネイティブ反応し、私は私が正しくマッピングし、初期状態を管理することができますどのようにと混同ビットです。

私は、次のコンポーネントを持っています:

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)、コンストラクタが始まる行です。私はこの問題は、それはクラスではなく、関数内でない限り、私はコンストラクタを使用することはできません実際にあると推測していますか?

ここでは右方向への缶誰かのポイント私?

Kraylog:

あなたは正しい、あなたは機能部品でコンストラクタを使用することはできません。

あなたにできることは、どちらか一方を選択しています。クラスコンポーネントは次のようになります。

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及びその他のフックこちら

おすすめ

転載: http://10.200.1.11:23101/article/api/json?id=392398&siteId=1