はじめに
reactNativeで簡易的なトイレマップを作ろうと、
map機能をimportしたが、エラーが出てしまったので、今後のために解決策を記す。
コード
App.js
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { MapView } from 'expo';
export default class App extends React.Component {
render(){
return (
<View style={styles.container}>
<MapView></MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
mapview:{
...StyleSheet.absoluteFillObject,
},
});
出てきたエラー
Unable to resolve module `react-native-maps` from `/Users/tnatsume/reactNative/toilet/App.js`: Module `react-native-maps` does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
ABI34_0_0RCTFatal
__37-[ABI34_0_0RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
解決
コード
App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
export default class Main extends Component {
render() {
return (
<MapView
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}
const styles = StyleSheet.create({
map: { ...StyleSheet.absoluteFillObject, },
});
地図画面
何が原因だったかはよくわからなかった(本当はよくない)が、
何はともあれ、地図を表示できた。