React Native Android报latlng cannot be null错误，iOS运行正常求助

这个错误的核心很明确：地图组件（MapView或Marker）拿到了无效的null/undefined坐标值，而且Android对这类异常的容错性比iOS低，所以才会出现iOS正常、Android报错的差异。结合你的代码和场景，咱们从这几个关键方向解决：

1. 补全Android定位权限的动态申请 #

你已经在AndroidManifest.xml里添加了ACCESS_FINE_LOCATION静态权限，但Android 6.0及以上版本必须动态向用户申请权限才能真正获取定位数据。如果跳过这一步，App在Android上拿不到位置信息，this.state.coords就会是null，直接导致MapView的region没有有效经纬度。

实现步骤： #

用RN自带的PermissionsAndroidAPI在组件挂载时请求权限：

import { PermissionsAndroid } from 'react-native';

componentDidMount() {
  this.requestLocationPermission();
}

async requestLocationPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: "请求定位权限",
        message: "我们需要获取你的位置来显示地图内容",
        buttonNegative: "取消",
        buttonPositive: "允许"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      // 调用你的定位获取逻辑，更新state里的coords
      this.getCurrentUserLocation();
    } else {
      console.log("定位权限被拒绝");
      // 给个默认坐标兜底，比如北京
      this.setState({
        coords: { 
          latitude: 39.9042, 
          longitude: 116.4074,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421
        }
      });
    }
  } catch (err) {
    console.warn(err);
  }
}

2. 给state.coords设置初始化兜底值 #

如果定位逻辑需要时间加载，组件首次渲染时this.state.coords可能还未被赋值，直接传给MapView就会触发报错。

解决方法： #

在组件构造函数里初始化默认坐标：

constructor(props) {
  super(props);
  this.state = {
    coords: {
      latitude: 39.9042,
      longitude: 116.4074,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }
  };
}

或者在渲染前判断坐标有效性，无效时显示加载态：

render() {
  // 检查坐标是否有效
  if (!this.state.coords?.latitude || !this.state.coords?.longitude) {
    return <View style={{flex:1, justifyContent:'center', alignItems:'center'}}><Text>加载地图中...</Text></View>;
  }

  // 原来的渲染逻辑
}

3. 过滤props.places中的无效Marker坐标 #

你的代码里遍历this.props.places渲染Marker，如果其中某个marker.coordinate是null，或者缺少latitude/longitude，Android会直接报错（iOS可能自动忽略无效Marker）。

解决方法： #

渲染Marker前先过滤掉无效坐标：

{this.props.places.map((marker, index) => {
  // 跳过坐标无效的marker
  if (!marker.coordinate?.latitude || !marker.coordinate?.longitude) {
    return null;
  }

  const scaleStyle = {
    transform: [{ scale: interpolations[index].scale }],
  };
  const opacityStyle = { opacity: interpolations[index].opacity };
  
  return (
    <MapView.Marker key={index} coordinate={marker.coordinate}>
      <Animated.View style={[styles.markerWrap, opacityStyle]}>
        <Animated.View style={[styles.ring, scaleStyle]} />
        <View style={styles.marker} />
      </Animated.View>
    </MapView.Marker>
  );
})}

最后验证点 #

1. 确保Android设备/模拟器开启了定位服务
2. 启动App时允许定位权限
3. 检查props.places的数据源是否包含完整有效的坐标

按以上步骤调整后，Android端的报错应该就能解决了。

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