调整界面

example/src/app.js

-import {StatusBar} from 'react-native'
 import {StackNavigator} from 'react-navigation'
 import Examples from './examples'
 import MapTypes from './map-types'
@@ -8,9 +7,6 @@ import Controls from './controls'
 import Gestures from './gestures'
 import Marker from './marker'
 
-StatusBar.setBackgroundColor('#e0e0e0')
-StatusBar.setBarStyle('dark-content')
-
 export default StackNavigator({
   Examples: {screen: Examples},
   MapTypes: {screen: MapTypes},

example/src/examples.js

@@ -5,28 +5,41 @@ import {
   ScrollView,
   StyleSheet,
   TouchableHighlight,
+  TouchableNativeFeedback,
+  Platform,
+  StatusBar,
 } from 'react-native'
 
+let Touchable = TouchableHighlight
+if (Platform.OS === 'android') {
+  Touchable = TouchableNativeFeedback
+}
+
 export default class Examples extends Component {
   static navigationOptions = {
     title: 'AMap3D Examples',
   }
 
   _renderItem(title, route) {
-    return <TouchableHighlight onPress={() => this.props.navigation.navigate(route)}>
+    return <Touchable onPress={() => this.props.navigation.navigate(route)}>
       <View style={styles.item}>
         <Text style={styles.itemText}>{title}</Text>
       </View>
-    </TouchableHighlight>
+    </Touchable>
   }
 
   render() {
     return <ScrollView contentContainerStyle={styles.scrollView}>
+      <StatusBar barStyle='dark-content' backgroundColor='#e0e0e0'/>
       <View style={styles.group}>
         {this._renderItem('地图模式', 'MapTypes')}
+        <View style={styles.separator}/>
         {this._renderItem('图层功能', 'Layers')}
+        <View style={styles.separator}/>
         {this._renderItem('室内地图', 'Indoor')}
+        <View style={styles.separator}/>
         {this._renderItem('地图控件', 'Controls')}
+        <View style={styles.separator}/>
         {this._renderItem('手势交互', 'Gestures')}
       </View>
       <View style={styles.group}>
@@ -43,14 +56,14 @@ const styles = StyleSheet.create({
   },
   group: {
     marginTop: 15,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#e0e0e0',
   },
   item: {
     padding: 15,
     backgroundColor: '#fff',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#e0e0e0',
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: '#e0e0e0',
   },
   itemText: {
     fontSize: 16,

example/src/layers.js

@@ -23,7 +23,7 @@ export default class Layers extends Component {
             value={this.state.showsBuildings}/>
         </View>
         <View style={styles.control}>
-          <Text>交通</Text>
+          <Text>路况</Text>
           <Switch
             onValueChange={showsTraffic => this.setState({showsTraffic})}
             value={this.state.showsTraffic}/>