javascript - 无法在反应原生地图中移动按钮
问题描述
我正在尝试在我的地图组件中移动一个按钮。我正在使用 react-native-maps
让我告诉你我的
render() {
console.log(this.state)
const { region } = this.state;
return (
<View style={styles.container}>
<MapView
provider={this.props.provider}
mapType="standard"
style={styles.map}
showsUserLocation={true}
initialRegion={region}
>
<UrlTile
urlTemplate="XXX"
zIndex={-1}
/>
<Button style={{ borderWidth: 2, alignItems:'right',justifyContent:'right'}} title="Info" onPress={() => console.log("This is not fired")}/>
</MapView>
<View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
marginTop: 20,
flex: 1,
},
});
在这种情况下,我的按钮位于地图的中心/顶部,我想将其移动到地图的中心/右侧
任何想法?谢谢
解决方案
首先关闭 MapView 组件并将按钮放在它下面,如下所示
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 1 }}
/>
<View
style={{
position: 'absolute',//use absolute position to show button on top of the map
top: '50%', //for center align
alignSelf: 'flex-end' //for align to right
}}
>
<Button />
</View>
推荐阅读
- qt - 如何实现地理参考 MapQuickItem
- php - 如何安装 laravel/dusk?
- python - 用于取消正在运行的 Oracle SQL 查询的 Python 代码
- laravel-5 - 为什么将 ID 替换为另一个表中的值?Laravel 属于
- javascript - 如何在 Nestjs 中刷新令牌
- php - 模板未从控制器 drupal 8 呈现
- jquery - 切换内容可编辑属性
- php - SVN Tortoise 使用 PHP 更新
- python - Keras:使用更大的训练集更新模型
- java - Java gral add问题 方法add(Comparable []) 对于DataTable类型不明确