优化示例在 iOS 下的样式

example/src/app.js

+import {Platform} from 'react-native'
 import {StackNavigator} from 'react-navigation'
 import Examples from './examples'
 import MapTypes from './examples/map-types'
@@ -25,7 +26,14 @@ export default StackNavigator({
   navigationOptions: {
     headerTintColor: '#212121',
     headerStyle: {
-      backgroundColor: '#f5f5f5',
+      ...Platform.select({
+        ios: {
+          backgroundColor: '#fff',
+        },
+        android: {
+          backgroundColor: '#f5f5f5',
+        },
+      })
     },
   },
 })

example/src/examples.js

@@ -58,7 +58,11 @@ export default class Examples extends Component {
 const styles = StyleSheet.create({
   scrollView: {
     flex: 1,
-    backgroundColor: '#f5f5f5',
+    ...Platform.select({
+      android: {
+        backgroundColor: '#f5f5f5',
+      },
+    })
   },
   group: {
     marginTop: 15,
@@ -69,7 +73,6 @@ const styles = StyleSheet.create({
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: '#e0e0e0',
   },
   itemText: {
     fontSize: 16,

example/src/examples/controls.js

 import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch} from 'react-native'
+import {StyleSheet, View, Text, Switch, Platform} from 'react-native'
 import MapView from 'react-native-amap3d'
+import styles from '../styles'
 
 export default class Controls extends Component {
   static navigationOptions = {
@@ -9,7 +10,7 @@ export default class Controls extends Component {
 
   state = {
     showsCompass: false,
-    showsScale: false,
+    showsScale: true,
     showsZoomControls: true,
     showsLocationButton: false,
   }
@@ -56,25 +57,3 @@ export default class Controls extends Component {
     </View>
   }
 }
-
-const styles = StyleSheet.create({
-  map: {
-    flex: 1,
-  },
-  controls: {
-    height: 72,
-    backgroundColor: '#f5f5f5',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    elevation: 4,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-  control: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  switch: {
-    marginTop: 5,
-  },
-})

example/src/examples/gestures.js

 import React, {Component} from 'react'
 import {StyleSheet, View, Text, Switch} from 'react-native'
 import MapView from 'react-native-amap3d'
+import styles from '../styles'
 
 export default class Gestures extends Component {
   static navigationOptions = {
@@ -55,26 +56,3 @@ export default class Gestures extends Component {
     </View>
   }
 }
-
-const styles = StyleSheet.create({
-  map: {
-    flex: 1,
-  },
-  controls: {
-    height: 72,
-    backgroundColor: '#f5f5f5',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    elevation: 4,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-  control: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  switch: {
-    marginTop: 5,
-  },
-})
-

example/src/examples/indoor.js

@@ -10,11 +10,12 @@ export default class Indoor extends Component {
   render() {
     return <MapView
       coordinate={{
-        latitude: 39.91095,
+        latitude: 39.90980,
         longitude: 116.37296,
       }}
       zoomLevel={18}
       showsIndoorMap={true}
+      tilt={45}
       style={StyleSheet.absoluteFill}/>
   }
 }

example/src/examples/layers.js

 import React, {Component} from 'react'
-import {StyleSheet, View, Text, Switch} from 'react-native'
+import {StyleSheet, View, Text, Switch, Platform} from 'react-native'
 import MapView from 'react-native-amap3d'
+import commonStyles from '../styles'
 
 export default class Layers extends Component {
   static navigationOptions = {
@@ -17,19 +18,19 @@ export default class Layers extends Component {
     return <View style={StyleSheet.absoluteFill}>
       <View style={styles.controls}>
         <View style={styles.control}>
-          <Text>建筑</Text>
+          <Text style={styles.label}>建筑</Text>
           <Switch
             onValueChange={showsBuildings => this.setState({showsBuildings})}
             value={this.state.showsBuildings}/>
         </View>
         <View style={styles.control}>
-          <Text>路况</Text>
+          <Text style={styles.label}>路况</Text>
           <Switch
             onValueChange={showsTraffic => this.setState({showsTraffic})}
             value={this.state.showsTraffic}/>
         </View>
         <View style={styles.control}>
-          <Text>标签</Text>
+          <Text style={styles.label}>标签</Text>
           <Switch
             onValueChange={showsLabels => this.setState({showsLabels})}
             value={this.state.showsLabels}/>
@@ -46,21 +47,22 @@ export default class Layers extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  map: {
-    flex: 1,
-  },
-  controls: {
+const styles = {
+  ...commonStyles,
+  map: [commonStyles.map, {
+    ...Platform.select({
+      ios: {
+        marginBottom: 54,
+      },
+    }),
+  }],
+  controls: [commonStyles.controls, {
     height: 54,
-    backgroundColor: '#f5f5f5',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    elevation: 4,
-    paddingLeft: 20,
-    paddingRight: 20,
-  },
-  control: {
+  }],
+  control: [commonStyles.control, {
     flexDirection: 'row',
-    alignItems: 'center',
+  }],
+  label: {
+    marginRight: 5,
   },
-})
+}

example/src/styles.js

+import {StyleSheet, Platform} from 'react-native'
+
+export default StyleSheet.create({
+  map: {
+    flex: 1,
+    ...Platform.select({
+      ios: {
+        marginBottom: 72,
+      },
+    }),
+  },
+  controls: {
+    height: 72,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    elevation: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+    ...Platform.select({
+      android: {
+        backgroundColor: '#f5f5f5',
+      },
+      ios: {
+        backgroundColor: '#fff',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderTopColor: '#e0e0e0',
+        borderTopWidth: StyleSheet.hairlineWidth,
+        zIndex: 1,
+      },
+    }),
+  },
+  control: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  switch: {
+    marginTop: 5,
+  },
+})