- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native Map 视图
Props
Edit on GitHub
legalLabelInsets {顶部:数字型;左部:数字型;底部:数字型;右部:数字型}
为 map 嵌入合法的标签,最初是在 map 的左下角。更多信息请看 EdgeInsetsPropType.js
。
maxDelta 数字型
能够显示的区域的最大尺寸。
minDelta 数字型
能够显示的区域的最小尺寸。
onRegionChange 函数型
当用户拖动 map 时,会不断地调用回调函数。
onRegionChangeComplete 函数型
当用户完成移动 map 时,调用一次回调函数。
pitchEnabled 布尔型
当这个属性设置为 true
,且有效的相机与 map 相关联,那么相机的螺旋角用于倾斜 map 的平面。当这个属性设置为false
时,相机的螺旋角被忽略,并且 map 上总是显示为好像用户直接向下看。
region {纬度:数字型,经度:数字型,latitudeDelta:数字型,longitudeDelta:数字型}
该地区会被 map 显示出来。
由中心坐标和坐标跨度定义的区域显示出来。
rotateEnabled 布尔型
当这个属性设置为 true
,且有效的相机与 map 相关联,那么相机的航向角用于围绕 map 中心点旋转 map 平面。当该属性设置为 false
时,相机的航向角被忽略,map 总是定向的,这样真正的北方就会位于 map 视图的顶部。
scrollEnabled 布尔型
如果是 false
,用户无法更改 map 显示的区域。默认值是 true
。
showsUserLocation 布尔型
如果是 true
,应用程序会请求用户的位置并关注它。默认值是 false
。
注意:为了获取地理位置,你需要添加把 NSLocationWhenInUseUsageDescription 键添加到 info.plist,否则就会失败!
style View#style
用于 MapView
的样式设置和布局。更多信息请看 StyleSheet.js
和 ViewStylePropTypes.js
。
zoomEnabled 布尔型
如果是 false
,用户无法缩小/放大 map。默认值是 true
。
例子
Edit on GitHub
'use strict';var React = require('react-native');var StyleSheet = require('StyleSheet');var {
MapView,
Text,
TextInput,
View,
} = React;var MapRegionInput = React.createClass({
propTypes: {
region: React.PropTypes.shape({
latitude: React.PropTypes.number,
longitude: React.PropTypes.number,
latitudeDelta: React.PropTypes.number,
longitudeDelta: React.PropTypes.number,
}),
onChange: React.PropTypes.func.isRequired,
},
getInitialState: function() { return {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
};
},
componentWillReceiveProps: function(nextProps) { this.setState(nextProps.region);
},
render: function() { var region = this.state; return ( <View>
<View style={styles.row}>
<Text>
{'Latitude'} </Text>
<TextInput
value={'' + region.latitude} style={styles.textInput}
onChange={this._onChangeLatitude}
/>
</View>
<View style={styles.row}>
<Text>
{'Longitude'} </Text>
<TextInput
value={'' + region.longitude} style={styles.textInput}
onChange={this._onChangeLongitude}
/>
</View>
<View style={styles.row}>
<Text>
{'Latitude delta'} </Text>
<TextInput
value={'' + region.latitudeDelta} style={styles.textInput}
onChange={this._onChangeLatitudeDelta}
/>
</View>
<View style={styles.row}>
<Text>
{'Longitude delta'} </Text>
<TextInput
value={'' + region.longitudeDelta} style={styles.textInput}
onChange={this._onChangeLongitudeDelta}
/>
</View>
<View style={styles.changeButton}>
<Text onPress={this._change}>
{'Change'} </Text>
</View>
</View>
);
},
_onChangeLatitude: function(e) { this.setState({latitude: parseFloat(e.nativeEvent.text)});
},
_onChangeLongitude: function(e) { this.setState({longitude: parseFloat(e.nativeEvent.text)});
},
_onChangeLatitudeDelta: function(e) { this.setState({latitudeDelta: parseFloat(e.nativeEvent.text)});
},
_onChangeLongitudeDelta: function(e) { this.setState({longitudeDelta: parseFloat(e.nativeEvent.text)});
},
_change: function() { this.props.onChange(this.state);
},
});var MapViewExample = React.createClass({
getInitialState() { return {
mapRegion: null,
mapRegionInput: null,
};
},
render() { return ( <View>
<MapView
style={styles.map}
onRegionChange={this._onRegionChanged}
region={this.state.mapRegion}
/>
<MapRegionInput
onChange={this._onRegionInputChanged}
region={this.state.mapRegionInput}
/>
</View>
);
},
_onRegionChanged(region) { this.setState({mapRegionInput: region});
},
_onRegionInputChanged(region) { this.setState({
mapRegion: region,
mapRegionInput: region,
});
},
});var styles = StyleSheet.create({
map: {
height: 150,
margin: 10,
borderWidth: 1,
borderColor: '#000000',
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
},
textInput: {
width: 150,
height: 20,
borderWidth: 0.5,
borderColor: '#aaaaaa',
fontSize: 13,
padding: 4,
},
changeButton: {
alignSelf: 'center',
marginTop: 5,
padding: 3,
borderWidth: 0.5,
borderColor: '#777777',
},
});
exports.title = '<MapView>';
exports.description = 'Base component to display maps';
exports.examples = [
{
title: 'Map',
render(): ReactElement { return <MapViewExample />; }
},
{
title: 'Map shows user location',
render() { return <MapView style={styles.map} showsUserLocation={true} />;
}
}
];