react-native - How to display map using react-nati

问题:

I am trying to display a Map View using react-native-maps. The component appears to be displaying except it is blank.

Is it my stylesheet or am I calling the 'MapView' component right?

Here is the code:

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,
   }
});

回答1:

Run

$react-native link

from the project root directory to link the react-native-maps with your project. (or you can follow these manual steps listed here:https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md#option-3-manually )