Lesson 01-React Native Core Fundamental Concepts

React Native Overview

Definition and Design Philosophy of React Native

Cross-Platform Mobile Development Principles

// Example: Same JS code running on different platforms
import React from 'react';
import { View, Text, Platform } from 'react-native';

const App = () => (
  <View>
    <Text>
      Current Platform: {Platform.OS} {/* Automatically detects iOS/Android */}
    </Text>
    {/* Platform-specific components */}
    {Platform.OS === 'ios' ? <IOSpecificComponent /> : <AndroidSpecificComponent />}
  </View>
);

React-Based Design Philosophy

// Example: React componentization in RN
import React, { useState } from 'react';
import { Button, Text } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0); // React state management

  return (
    <>
      <Text>Click Count: {count}</Text>
      <Button 
        title="Increment" 
        onPress={() => setCount(count + 1)} // Event handling
      />
    </>
  );
};

Core Features of React Native

Cross-Platform Implementation Mechanism

// Example: Handling platform-specific code
import { Platform } from 'react-native';

const styles = {
  container: {
    padding: Platform.select({
      ios: 20,    // iOS-specific style
      android: 10 // Android-specific style
    })
  }
};

Native Component Integration

// Example: Using native modules
import { NativeModules } from 'react-native';
const { CameraModule } = NativeModules;

// Calling native method
CameraModule.takePicture()
  .then(imageUri => console.log(imageUri))
  .catch(err => console.error(err));

Hot Update Implementation Principle

// Example: Code push update process
// 1. Development server generates bundle file
// 2. Client checks for updates via CodePush
import codePush from 'react-native-code-push';

const App = () => {
  // ...component logic
};

export default codePush({
  checkFrequency: codePush.CheckFrequency.ON_APP_START // Check for updates on app start
})(App);

Application Scenarios for React Native

Typical Use Cases

1. Cross-Platform Enterprise Applications
   - Example: Internal Management Systems
   - Advantage: Develop once, deploy to multiple platforms

2. Social Applications
   - Example: Chat Applications
   - Key Technology: WebSocket integration

3. E-commerce Applications
   - Example: Product Display Systems
   - Special Requirement: Native payment integration

Development History and Ecosystem of React Native

Key Milestones in Version Evolution

- 2015: Facebook releases React Native
- 2017: Fabric renderer architecture proposed
- 2018: Hermes engine introduced
- 2020: TurboModules and JSI officially released
- 2022: New architecture fully implemented

Ecosystem Components

// Example: Commonly used third-party libraries
import ReactNavigation from '@react-navigation/native'; // Navigation
import Redux from 'react-redux'; // State management
import Axios from 'axios'; // Network requests
import Realm from 'realm'; // Local database

Comparison of React Native with Flutter and Native Development

Technical Comparison Table

| Feature             | React Native       | Flutter            | Native Development |
|---------------------|--------------------|--------------------|--------------------|
| Development Language| JavaScript/TypeScript | Dart          | Java/Kotlin/Swift  |
| Rendering Mechanism | Native Components  | Self-drawn Engine (Skia) | Native UI Components |
| Performance         | Near-Native        | High Performance   | Optimal Performance |
| Hot Update Support  | Robust             | Robust             | Platform Restricted |
| Community Ecosystem | Extensive          | Rapidly Growing    | Official Support   |

React Native Core Architecture

JavaScript and Native Bridge Mechanism

Bridge Communication Principle

// Example: Bridge communication process
import { NativeModules } from 'react-native';
const { UIManager } = NativeModules;

// Calling native method
UIManager.measureLayoutRelativeToParent(
  findNodeHandle(this.refs.myView),
  (error, left, top, width, height) => {
    // Handle measurement results
  }
);

TurboModules New Architecture

// Example: TurboModules interface definition
// NativeCalculator.ts (TypeScript interface)
import { TurboModule } from 'react-native';
export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
}

// NativeCalculatorModule.java (Android implementation)
public class NativeCalculatorModule extends ReactContextBaseJavaModule implements Spec {
  @Override
  public Promise add(double a, double b) {
    return Arguments.makePromiseResult(a + b);
  }
}

Component-Based Development

Custom Component Example

// Example: Creating a reusable component
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Card = ({ title, children }) => (
  <View style={styles.card}>
    <Text style={styles.title}>{title}</Text>
    {children}
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 16,
    shadowColor: '#000',
    shadowOpacity: 0.1
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  }
});

export default Card;

Layout System

Flexbox Layout Example

// Example: Complex layout implementation
import { View, Text } from 'react-native';

const AppLayout = () => (
  <View style={styles.container}>
    <View style={styles.header} />
    <View style={styles.content}>
      <View style={styles.sidebar} />
      <View style={styles.main} />
    </View>
    <View style={styles.footer} />
  </View>
);

const styles = {
  container: {
    flex: 1,
    flexDirection: 'column'
  },
  header: {
    height: 60,
    backgroundColor: '#6200ee'
  },
  content: {
    flex: 1,
    flexDirection: 'row'
  },
  sidebar: {
    width: 80,
    backgroundColor: '#f5f5f5'
  },
  main: {
    flex: 1,
    backgroundColor: '#fff'
  },
  footer: {
    height: 60,
    backgroundColor: '#6200ee'
  }
};

Styling and Style Sheets

Advanced StyleSheet Usage

// Example: Dynamic styles and reuse
import { StyleSheet, View, Text } from 'react-native';

const getDynamicStyle = (isActive) => ({
  ...styles.base,
  backgroundColor: isActive ? '#4CAF50' : '#f44336'
});

const App = () => {
  const [active, setActive] = useState(false);
  
  return (
    <View>
      <Text 
        style={getDynamicStyle(active)}
        onPress={() => setActive(!active)}
      >
        Toggle State
      </Text>
      
      {/* Style reuse */}
      <View style={[styles.card, { marginTop: 10 }]} />
    </View>
  );
};

const styles = StyleSheet.create({
  base: {
    padding: 16,
    borderRadius: 8
  },
  card: {
    backgroundColor: '#fff',
    shadowColor: '#000'
  }
});

Event System

Gesture Handling Example

// Example: Complex gesture recognition
import { PanResponder, View } from 'react-native';

const GestureHandler = () => {
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (evt, gestureState) => {
      console.log('Move Distance:', gestureState.dx, gestureState.dy);
    },
    onPanResponderRelease: () => {
      console.log('Gesture Ended');
    }
  });

  return <View {...panResponder.panHandlers} style={{ flex: 1 }} />;
};

Development Environment Setup

Node.js Environment Configuration

Version Management Tools Comparison

| Tool    | Features                     | Installation Command Example    |
|---------|------------------------------|-------------------------------|
| nvm     | Supports multiple version switching | `nvm install 16.14.0` |
| fnm     | Fast switching, good compatibility | `fnm install 16.14.0` |
| volta   | Auto-switch to project-specified version | `volta pin node@16.14.0` |

React Native CLI Usage

Project Initialization Process

# Create new project
npx react-native init MyApp --template react-native-template-typescript

# Run project
cd MyApp
npx react-native run-android  # Android
npx react-native run-ios      # iOS

Development Tools Configuration

1. ES7+ React/Redux/React-Native snippets
2. React Native Tools
3. Prettier - Code formatter
4. ESLint
5. TypeScript Importer

Emulator and Physical Device Debugging

Android Debugging Configuration

// android/app/build.gradle
android {
    ...
    buildTypes {
        debug {
            debuggable true
            minifyEnabled false
        }
    }
}

iOS Debugging Configuration

# ios/MyApp/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Example Project Execution

Minimal Runnable Example

// App.js
import React from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Hello React Native!</Text>
  </SafeAreaView>
);

export default App;

Debugging Commands Summary

# Start Metro bundler service
npx react-native start

# Android debugging
npx react-native run-android

# iOS debugging
npx react-native run-ios

# Hot reload
# Press Ctrl+M (Android) or Cmd+D (iOS) in emulator to open developer menu
Course: Mastering React Native：Modern Cross-Platform Guide
Share your love

Trending now

Exploring Web 3D Core Technologies Development
WebRTC Advanced Guide：Media, Transport & Architecture
WebSocket Deep Guide：Building High-Performance Realtime Systems
Master HTML5 and CSS3: From Beginner to Advanced Developer