如何将MapView的引用传递给React Native中的另一个组件？

完全可以用Context来解决这个问题，不用修改现有组件的类/函数类型，具体步骤如下：

1. 创建MapContext #

先建一个Context容器，用来存放MapView的ref和对应的动画方法，让需要的组件能共享这些内容：

import React, { createContext, Component } from 'react';

// 初始化Context，默认值设为空对象即可
const MapContext = createContext({
  mapRef: null,
  animateMap: () => {}
});

export default MapContext;

2. 在Map组件中提供Context值 #

在你的Map类组件里，把MapView的ref和写好的动画方法放到Context的Provider里，确保其他组件能拿到：

import MapContext from './MapContext';
import MapView from 'react-native-maps';

class Map extends Component {
  mapRef = React.createRef();

  // 定义地图动画的具体逻辑
  animateMap = () => {
    if (this.mapRef.current) {
      this.mapRef.current.animateToRegion({
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }, 1000);
    }
  };

  render() {
    return (
      <MapContext.Provider value={{ mapRef: this.mapRef, animateMap: this.animateMap }}>
        <MapView
          ref={this.mapRef}
          style={{ flex: 1 }}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
        {/* 如果AnimateMapButton是Map的子组件，直接在这里渲染；如果是兄弟组件，把Provider移到它们共同的父组件里 */}
      </MapContext.Provider>
    );
  }
}

export default Map;

3. 在AnimateMapButton组件中使用Context #

因为是类组件，用contextType就能直接拿到Context里的方法，点击按钮时调用动画即可：

import React, { Component } from 'react';
import { TouchableOpacity, Text } from 'react-native';
import MapContext from './MapContext';

class AnimateMapButton extends Component {
  // 关联Context
  static contextType = MapContext;

  render() {
    const { animateMap } = this.context;
    return (
      <TouchableOpacity onPress={animateMap} style={{ padding: 10, backgroundColor: '#1677ff', margin: 10, borderRadius: 4 }}>
        <Text style={{ color: 'white', textAlign: 'center' }}>触发地图动画</Text>
      </TouchableOpacity>
    );
  }
}

export default AnimateMapButton;

关键注意点 #

• 如果Map和AnimateMapButton是兄弟组件，一定要把MapContext.Provider放到它们共同的父组件中，保证两个组件都在同一个Context范围内。
• 调用动画前先判断mapRef是否存在，避免空指针报错。

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