react-native - react-native - react-native-maps を使用してマップを表示する方法

Question

react-native-mapsを使用してマップ ビューを表示しようとしています。コンポーネントは、空白であることを除いて表示されているように見えます。

それは私のスタイルシートですか、それとも「MapView」コンポーネントを正しく呼び出していますか?

コードは次のとおりです。

var MapView = require('react-native-maps');

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0,
              longitudeDelta: 0.0,
          }}
        />
      </View>

    );
  }
};


var styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
   map: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
   }
});

Answer 1

走る

$react-native link

プロジェクトのルート ディレクトリから、react-native-maps をプロジェクトにリンクします。(または、ここにリストされている手動の手順に従うこともできます: https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md#option-3-manually )