Skip to content

R
react-native-amap3d
Commit 5a07eb3a authored by Qiu Xiang's avatar Qiu Xiang
Browse files
Options

添加基本示例

parent 1f632d25
Hide whitespace changes
Inline Side-by-side
Showing with 342 additions and 37 deletions
example/app.js deleted 100644 → 0
View file @ 1f632d25
import React, {Component} from 'react'
import {Text} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class Example extends Component {
render() {
return <AMapView style={{flex: 1}}/>
}
}
example/index.android.js
View file @ 5a07eb3a
import React, {Component} from 'react'
import {AppRegistry} from 'react-native'
import App from './app'
import App from './src/app'
AppRegistry.registerComponent('Example', () => App)
example/index.ios.js
View file @ 5a07eb3a
import React, {Component} from 'react'
import {AppRegistry} from 'react-native'
import App from './app'
import App from './src/app'
AppRegistry.registerComponent('Example', () => App)
example/package.json
View file @ 5a07eb3a
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-amap3d": ".."
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
\ No newline at end of file
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-amap3d": "..",
"react-navigation": "^1.0.0-beta.11"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
example/src/app.js 0 → 100644
View file @ 5a07eb3a
import {StackNavigator} from 'react-navigation'
import Examples from './examples'
import MapTypes from './map-types'
import Layers from './layers'
import Indoor from './indoor'
import Controls from './controls'
import Gestures from './gestures'
export default StackNavigator({
Examples: {screen: Examples},
MapTypes: {screen: MapTypes},
Layers: {screen: Layers},
Indoor: {screen: Indoor},
Controls: {screen: Controls},
Gestures: {screen: Gestures},
})
example/src/controls.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {StyleSheet, View, Text, Switch} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class Controls extends Component {
static navigationOptions = {
title: '地图控件',
}
state = {
showsCompass: false,
showsScale: false,
showsZoomControls: true,
showsMyLocationButton: false,
}
render() {
return <View style={StyleSheet.absoluteFill}>
<View style={styles.controls}>
<View style={styles.control}>
<Text>指南针</Text>
<Switch
onValueChange={showsCompass => this.setState({showsCompass})}
value={this.state.showsCompass}/>
</View>
<View style={styles.control}>
<Text>比例尺</Text>
<Switch
onValueChange={showsScale => this.setState({showsScale})}
value={this.state.showsScale}/>
</View>
<View style={styles.control}>
<Text>定位</Text>
<Switch
onValueChange={showsMyLocationButton => this.setState({showsMyLocationButton})}
value={this.state.showsMyLocationButton}/>
</View>
<View style={styles.control}>
<Text>缩放</Text>
<Switch
onValueChange={showsZoomControls => this.setState({showsZoomControls})}
value={this.state.showsZoomControls}/>
</View>
</View>
<AMapView
showsUserLocation={true}
showsCompass={this.state.showsCompass}
showsScale={this.state.showsScale}
showsMyLocationButton={this.state.showsMyLocationButton}
showsZoomControls={this.state.showsZoomControls}
style={styles.map}/>
</View>
}
}
const styles = StyleSheet.create({
map: {
flex: 1,
},
controls: {
height: 54,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-between',
elevation: 4,
paddingLeft: 20,
paddingRight: 20,
},
control: {
flexDirection: 'row',
alignItems: 'center',
},
})
example/src/examples.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {
View,
Text,
ScrollView,
StyleSheet,
TouchableHighlight,
} from 'react-native'
export default class Examples extends Component {
static navigationOptions = {
title: 'AMap3D Examples',
}
_renderItem(title, route) {
return <TouchableHighlight onPress={() => this.props.navigation.navigate(route)}>
<View style={styles.item}>
<Text style={styles.itemText}>{title}</Text>
</View>
</TouchableHighlight>
}
render() {
return <ScrollView>
{this._renderItem('地图模式', 'MapTypes')}
{this._renderItem('图层功能', 'Layers')}
{this._renderItem('室内地图', 'Indoor')}
{this._renderItem('地图控件', 'Controls')}
{this._renderItem('手势交互', 'Gestures')}
</ScrollView>
}
}
const styles = StyleSheet.create({
item: {
padding: 15,
backgroundColor: '#fff',
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#ddd',
},
itemText: {
fontSize: 16,
color: '#000',
},
})
example/src/gestures.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {StyleSheet, View, Text, Switch} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class Gestures extends Component {
static navigationOptions = {
title: '手势交互',
}
state = {
zoomEnabled: true,
scrollEnabled: true,
rotateEnabled: true,
tiltEnabled: true,
}
render() {
return <View style={StyleSheet.absoluteFill}>
<View style={styles.controls}>
<View style={styles.control}>
<Text>旋转</Text>
<Switch
onValueChange={rotateEnabled => this.setState({rotateEnabled})}
value={this.state.rotateEnabled}/>
</View>
<View style={styles.control}>
<Text>滑动</Text>
<Switch
onValueChange={scrollEnabled => this.setState({scrollEnabled})}
value={this.state.scrollEnabled}/>
</View>
<View style={styles.control}>
<Text>缩放</Text>
<Switch
onValueChange={zoomEnabled => this.setState({zoomEnabled})}
value={this.state.zoomEnabled}/>
</View>
<View style={styles.control}>
<Text>倾斜</Text>
<Switch
onValueChange={tiltEnabled => this.setState({tiltEnabled})}
value={this.state.tiltEnabled}/>
</View>
</View>
<AMapView
zoomEnabled={this.state.zoomEnabled}
scrollEnabled={this.state.scrollEnabled}
rotateEnabled={this.state.rotateEnabled}
tiltEnabled={this.state.tiltEnabled}
style={styles.map}/>
</View>
}
}
const styles = StyleSheet.create({
map: {
flex: 1,
},
controls: {
height: 54,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-between',
elevation: 4,
paddingLeft: 20,
paddingRight: 20,
},
control: {
flexDirection: 'row',
alignItems: 'center',
},
})
example/src/indoor.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {StyleSheet, View, Text, Switch} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class Indoor extends Component {
static navigationOptions = {
title: '室内地图',
}
render() {
return <AMapView
showsIndoorMap={true}
showsIndoorSwitch={true}
style={StyleSheet.absoluteFill}/>
}
}
example/src/layers.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {StyleSheet, View, Text, Switch} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class Layers extends Component {
static navigationOptions = {
title: '图层的显示',
}
state = {
showsMapText: true,
showsTraffic: false,
showsBuildings: false,
}
render() {
return <View style={StyleSheet.absoluteFill}>
<View style={styles.controls}>
<View style={styles.control}>
<Text>建筑</Text>
<Switch
onValueChange={showsBuildings => this.setState({showsBuildings})}
value={this.state.showsBuildings}/>
</View>
<View style={styles.control}>
<Text>交通</Text>
<Switch
onValueChange={showsTraffic => this.setState({showsTraffic})}
value={this.state.showsTraffic}/>
</View>
<View style={styles.control}>
<Text>文本</Text>
<Switch
onValueChange={showsMapText => this.setState({showsMapText})}
value={this.state.showsMapText}/>
</View>
</View>
<AMapView
zoomLevel={17}
showsMapText={this.state.showsMapText}
showsTraffic={this.state.showsTraffic}
showsBuildings={this.state.showsBuildings}
style={styles.map}/>
</View>
}
}
const styles = StyleSheet.create({
map: {
flex: 1,
},
controls: {
height: 54,
backgroundColor: '#fff',
flexDirection: 'row',
justifyContent: 'space-between',
elevation: 4,
paddingLeft: 20,
paddingRight: 20,
},
control: {
flexDirection: 'row',
alignItems: 'center',
},
})
example/src/map-types.js 0 → 100644
View file @ 5a07eb3a
import React, {Component} from 'react'
import {StyleSheet, Picker} from 'react-native'
import AMapView from 'react-native-amap3d'
export default class MapTypes extends Component {
static navigationOptions = ({navigation}) => {
const {state, setParams} = navigation
state.params = state.params || {mapType: 'standard'}
return {
title: '地图模式',
headerRight: <Picker
style={{width: 100}}
selectedValue={state.params.mapType}
onValueChange={mapType => setParams({mapType})}>
<Picker.Item label='标准' value='standard'/>
<Picker.Item label='卫星' value='satellite'/>
<Picker.Item label='导航' value='navigation'/>
<Picker.Item label='夜间' value='night'/>
</Picker>,
}
}
render() {
return <AMapView
mapType={this.props.navigation.state.params.mapType}
style={StyleSheet.absoluteFill}/>
}
}
package.json
View file @ 5a07eb3a
......@@ -17,6 +17,7 @@
"react-native": ">=0.40"
},
"devDependencies": {
"react-native": "^0.44.0"
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment