目录

1. React Native 是什么？

2. 核心概念 & 与 React 的区别

（1）组件不同

（2）样式写法不同

（3）没有 DOM 和 CSS

3. 实战经验 & 常见问题

（1）导航：React Navigation vs Native Navigation

（2）性能优化

（3）原生模块集成

4. 我踩过的坑 & 解决方案

（1）undefined is not an object 错误

（2）Android 白屏/崩溃

（3）iOS 模拟器无法运行

（4）热更新失效

5. 未来趋势 & 个人建议

总结

⭐  写在最后

---

大家好，我是小杨，一名有6年经验的前端开发工程师。React Native（RN）是我近年来主要的技术栈之一，用它开发过多个跨平台App。今天就来聊聊我对React Native的理解，以及在实际项目中的经验和踩坑记录。

---

1. React Native 是什么？

React Native 是 Facebook 推出的跨平台移动端开发框架，基于 React，但渲染的是原生组件（而不是WebView），因此性能和体验接近原生App。

✅ 优点：

• 跨平台：一套代码，iOS & Android 都能跑

• 热更新：无需发版就能修复Bug（但苹果有限制）

• 生态丰富：社区有大量第三方库（如导航、动画、存储等）

• 开发效率高：前端开发者能快速上手

❌ 缺点：

• 性能不如纯原生（复杂动画、高频计算场景）

• 某些原生功能仍需写Native代码（Java/Swift/Objective-C）

• 升级可能踩坑（RN版本更新有时不兼容旧项目）

---

2. 核心概念 & 与 React 的区别

（1）组件不同

React 用 <div>、<span>，而 React Native 用：

• <View> → 类似 <div>

• <Text> → 必须包裹文字，不能直接写文本

• <Image> → 代替 <img>，且必须指定宽高

• <ScrollView> / <FlatList> → 滚动列表

（2）样式写法不同

RN 的样式是 JavaScript 对象，且属性名是驼峰式（如 backgroundColor 而不是 background-color）。

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
});

（3）没有 DOM 和 CSS

RN 没有 document、window，也不能用 CSS 选择器，布局完全依赖 Flexbox。

---

3. 实战经验 & 常见问题

（1）导航：React Navigation vs Native Navigation

• React Navigation（纯JS实现，推荐大多数场景）

  import { createStackNavigator } from '@react-navigation/stack';
  const Stack = createStackNavigator();
  function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

• React Native Navigation（RNN，基于原生导航，性能更好但配置复杂）

建议：中小项目用 React Navigation，大型复杂App考虑 RNN。

（2）性能优化

• 避免过多 re-render：用 React.memo、useMemo、useCallback

• 长列表用 FlatList：而不是 map + ScrollView

• 图片优化：用 resizeMode="cover" 或缓存库（如 react-native-fast-image）

（3）原生模块集成

如果 RN 没有某个功能（如蓝牙、相机高级操作），需要写原生模块：

• Android（Java/Kotlin）

• iOS（Objective-C/Swift）

// Android 原生模块示例
public class ToastModule extends ReactContextBaseJavaModule {
  @ReactMethod
  public void show(String message) {
    Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show();
  }
}

然后在 JS 端调用：

import { NativeModules } from 'react-native';
NativeModules.ToastModule.show('Hello from Native!');

---

4. 我踩过的坑 & 解决方案

（1）undefined is not an object 错误

通常是拼写错误或未正确导入组件，仔细检查变量名和文件路径。

（2）Android 白屏/崩溃

• 检查 MainActivity.java 是否继承 ReactActivity

• 运行 adb logcat 查看错误日志

（3）iOS 模拟器无法运行

• pod install 没执行 → 进 ios/ 目录运行 pod install

• Xcode 证书问题 → 选择正确的 Team 和 Bundle Identifier

（4）热更新失效

• CodePush 配置错误 → 检查 appcenter-config.json

• 版本号冲突 → 确保原生端和 JS 端版本一致

---

5. 未来趋势 & 个人建议

• Expo vs 裸 RN：Expo 适合快速开发，但灵活性低；裸 RN 适合需要原生集成的项目。

• 新架构（Fabric & TurboModules）：Facebook 正在优化 RN 性能，未来会更接近原生。

• 跨端竞争：Flutter 是强劲对手，但 RN 生态更成熟，短期不会淘汰。

我的建议：

• 新手：先学 React，再上手 RN

• 中小项目：用 Expo + React Navigation

• 复杂项目：裸 RN + TypeScript + 状态管理（Redux/MobX）

---

总结

React Native 是高效开发跨平台App的首选，但仍有学习成本和优化空间。如果你有 React 基础，上手会很快；如果想深入，还得学点原生开发。

⭐  写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
 

​