React Native中如何将TouchableOpacity按钮定位在地图底部？

你的问题出在绝对定位的位置属性未设置，仅靠zIndex只能调整层级，无法控制垂直位置。以下是具体修复步骤：

关键修改点 #

• 给包裹地图和按钮的父View添加position: 'relative'，确保按钮的绝对定位基于这个容器（否则会相对于更上层的SafeAreaView定位）。
• 给TouchableOpacity添加bottom属性控制底部间距，同时可通过left/right调整水平位置，让按钮固定在地图底部。

修改后的代码片段 #

{
  showmap && 
  <View style={{flex:1, position: 'relative'}}> {/* 添加relative定位 */}
      <MapView
    provider={PROVIDER_GOOGLE}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
    zoomEnabled={true}
    zoomControlEnabled={true}
    style={{flex:1, ...StyleSheet.absoluteFillObject}} {/* 移除冗余的宽高设置 */}
    >
    <Marker
      draggable
      coordinate={{
        latitude: 37.78825,
        longitude: -122.4324,
      }}
      onDragEnd={
        (e) => alert(JSON.stringify(e.nativeEvent.coordinate))
      }
      title={'Test Marker'}
      description={'This is a description of the marker'}
    />
  </MapView>
  <TouchableOpacity
  style={{
    position:"absolute",
    backgroundColor:"orange",
    zIndex:3,
    padding:12,
    bottom: 20, // 控制与底部的间距
    left: 16,   // 左侧间距
    right: 16,  // 右侧间距，让按钮撑满容器宽度
    borderRadius: 8 // 可选优化样式
  }}
  onPress={()=>{
    navigation.navigate("Verfication",{addressSet:address,flagC:flagUrl,phoneCodes:phoneCode})
  }}
  >
    <Text style={{fontSize:24,textAlign:"center"}}>Confirm Address</Text>
  </TouchableOpacity>
  </View>
}

原理说明 #

React Native中，position: absolute的元素默认会定位在父容器的左上角，必须通过top/bottom/left/right属性指定具体位置。同时设置父容器为position: relative，可以确保按钮的定位范围被限制在地图容器内，不会跑到页面其他区域。

内容的提问来源于stack exchange，提问作者JustDev