9、集成原生模块实战：摄像头、地图、音频模块怎么接？怎么接？

🎯 技术专家导语

当你需要调用摄像头扫码、加载地图定位、播放录音音效时，JavaScript 就不够用了。

React Native 提供了桥接机制，可以将 JS 代码和原生模块无缝集成。今天，我们就实战讲清楚这三个最常用模块的接入方式。

---

📷 一、摄像头模块：使用 react-native-camera

🔧 安装依赖

bash
复制编辑
npm install react-native-camera --save
npx pod-install

iOS 需开启相机权限
Android 需在 AndroidManifest.xml 中配置权限

xml
复制编辑
<uses-permission android:name="android.permission.CAMERA" />

📸 使用示例

jsx
复制编辑
<RNCamera
  style={styles.preview}
  type={RNCamera.Constants.Type.back}
  captureAudio={false}
/>

✅ 可用于扫码、拍照、录制短视频

---

🗺️ 二、地图模块：使用 react-native-maps

🔧 安装方式

bash
复制编辑
npm install react-native-maps --save
npx pod-install

📍 示例代码

jsx
复制编辑
<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

✅ 支持自定义标记、定位权限、地图拖拽事件监听

---

🎧 三、音频播放：使用 react-native-sound 或 expo-av

方案1（纯 RN 项目）

bash
复制编辑
npm install react-native-sound
npx pod-install

js
复制编辑
import Sound from 'react-native-sound'

const sound = new Sound('ding.mp3', Sound.MAIN_BUNDLE, () => {
  sound.play()
})

方案2（Expo 项目）

bash
复制编辑
npx expo install expo-av

js
复制编辑
const { sound } = await Audio.Sound.createAsync(
  require('./assets/ding.mp3')
)
await sound.playAsync()

---

📦 常见问题汇总

问题	解决方案
权限申请失败	检查 Info.plist / AndroidManifest.xml
编译报错	缺少 pod install、版本不兼容
播放卡顿或无声音	确保音频格式正确、路径是否为远程资源
地图不显示	API KEY 配置不正确，或权限未申请

---

✅ 总结 Checklist

• ✅ 摄像头用 react-native-camera，扫码拍照都不在话下
• ✅ 地图用 react-native-maps，高德/Google 都支持
• ✅ 音频播放：原生用 react-native-sound，Expo 项目用 expo-av

---

📘 下一篇预告：
👉 《发布上线指南：如何把你的 App 推送到 App Store 和 Google Play》