React Native基础详解

React Native（简称RN）是Facebook推出的跨平台移动应用开发框架，允许开发者使用JavaScript和React语法构建接近原生性能的iOS和Android应用。以下是React Native的核心知识点详解：

1. 核心概念

1.1 JSX语法

• 类似HTML的语法扩展，用于描述UI组件结构。

  const App = () => (
    <View style={styles.container}>
      <Text>Hello React Native!</Text>
    </View>
  );
  

1.2 组件（Components）

• 函数组件：通过函数定义，支持Hooks。

  function Welcome(props) {
    return <Text>Hello, {props.name}</Text>;
  }
  

• 类组件：通过ES6类定义，包含生命周期方法。

  class Welcome extends React.Component {
    render() {
      return <Text>Hello, {this.props.name}</Text>;
    }
  }
  

1.3 状态（State）与属性（Props）

• State：组件内部可变数据，通过useState（Hooks）或this.state（类组件）管理。

  const [count, setCount] = useState(0);
  

• Props：父组件传递的不可变数据。

  <Welcome name="Alice" />
  

2. 核心API与组件

2.1 基础组件

• View：类似HTML的<div>，用于布局容器。
• Text：显示文本的组件。
• Image：加载本地或网络图片。
• ScrollView：可滚动视图，适合少量数据。
• FlatList：高性能列表，支持大数据集和懒加载。

  <FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => <Text>{item.key}</Text>}
  />
  

2.2 样式与布局

• StyleSheet：类似CSS的样式系统，但使用JavaScript对象。

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

• Flexbox布局：默认布局方式，通过flexDirection、justifyContent等属性控制。

2.3 平台适配

• Platform模块：区分iOS和Android。

  const os = Platform.OS; // 'ios' 或 'android'
  

• 平台特定文件：如Component.ios.js和Component.android.js。

3. 导航（Navigation）

• React Navigation（推荐库）：
  • Stack Navigator：页面堆栈导航。

    const Stack = createStackNavigator();
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
    

  • Tab Navigator：底部/顶部标签栏。
  • Drawer Navigator：侧滑菜单。

---

4. 原生交互

4.1 原生模块（Native Modules）

• 通过NativeModules调用原生代码（Java/Swift）。

  import { NativeModules } from 'react-native';
  NativeModules.MyModule.doSomething();
  

4.2 桥接（Bridging）

• Android：继承ReactContextBaseJavaModule编写模块。
• iOS：实现RCTBridgeModule协议。

---

5. 数据管理

• Context API：跨组件共享数据。
• Redux/MobX：状态管理库（适合复杂应用）。
• 异步存储：AsyncStorage或第三方库（如@react-native-async-storage/async-storage）。

---

6. 调试与性能优化

• 调试工具：
  • Chrome DevTools：调试JavaScript。
  • Flipper：集成日志、网络请求检查。
  • React DevTools：检查组件树。
• 性能优化：
  • 减少re-render：使用React.memo或useMemo。
  • 虚拟化列表：FlatList或SectionList。
  • 避免内联函数/样式：减少重复渲染。

---

7. 热更新与部署

• CodePush（微软服务）：无需应用商店审核的热更新。

  code-push release-react MyApp android
  

• 打包发布：
  • Android：生成APK/AAB文件。
  • iOS：通过Xcode归档（Archive）。

8. 常用第三方库

• UI库：NativeBase、React Native Paper、UI Kitten。
• 动画：React Native Reanimated、Lottie。
• 网络请求：Axios、Fetch API。
• 表单：Formik + Yup。

9. 新架构（2023+）

• Fabric：新的渲染系统，提升性能。
• TurboModules：改进原生模块的懒加载。
• Codegen：自动生成类型安全的桥接代码。

10. 开发流程

1. 环境搭建：Node.js、JDK、Android Studio/Xcode。
2. 项目初始化：

   npx react-native init MyApp
   

3. 运行：

   npx react-native run-android # 或 run-ios
   

常见问题

• 性能瓶颈：长列表、过度渲染、频繁桥接调用。
• 兼容性问题：不同RN版本或原生平台差异。
• 调试困难：原生错误日志复杂。

掌握以上知识点后，可以高效开发跨平台应用。建议从官方文档（reactnative.dev）入手，结合实践项目加深理解。