React Native 开发指南

简介

React Native 是一个使用 React 和 JavaScript 来构建原生移动应用的框架。它允许开发者使用 React 的组件模型来构建跨平台的移动应用，同时保持原生应用的性能和用户体验。本文将介绍 React Native 的核心概念、开发流程和最佳实践。

环境搭建

1. 开发环境配置

# 安装 Node.js 和 Watchman
brew install node
brew install watchman

# 安装 React Native CLI
npm install -g react-native-cli

# 安装 Xcode (iOS 开发)
# 从 Mac App Store 安装 Xcode

# 安装 Android Studio (Android 开发)
# 从官网下载并安装 Android Studio

2. 创建项目

# 使用 React Native CLI 创建项目
npx react-native init MyApp

# 或使用 Expo CLI 创建项目
npx create-expo-app MyApp

基础组件

1. 核心组件

import React from 'react';
import {
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  TextInput,
  StyleSheet,
} from 'react-native';

const BasicComponents = () => {
  return (
    <ScrollView style={styles.container}>
      {/* View 组件 - 容器 */}
      <View style={styles.section}>
        <Text style={styles.title}>基础组件示例</Text>
      </View>

      {/* Text 组件 - 文本 */}
      <Text style={styles.text}>这是一段文本</Text>

      {/* Image 组件 - 图片 */}
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
      />

      {/* TextInput 组件 - 输入框 */}
      <TextInput
        style={styles.input}
        placeholder="请输入内容"
        onChangeText={(text) => console.log(text)}
      />

      {/* TouchableOpacity 组件 - 可点击区域 */}
      <TouchableOpacity
        style={styles.button}
        onPress={() => console.log('按钮被点击')}
      >
        <Text style={styles.buttonText}>点击我</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  section: {
    marginBottom: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  text: {
    fontSize: 16,
    marginBottom: 8,
  },
  image: {
    width: '100%',
    height: 200,
    marginBottom: 16,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    marginBottom: 16,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    borderRadius: 4,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default BasicComponents;

2. 列表组件

import React from 'react';
import {
  FlatList,
  SectionList,
  View,
  Text,
  StyleSheet,
} from 'react-native';

// FlatList 示例
const FlatListExample = () => {
  const data = [
    { id: '1', title: '项目 1' },
    { id: '2', title: '项目 2' },
    { id: '3', title: '项目 3' },
  ];

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.itemText}>{item.title}</Text>
        </View>
      )}
    />
  );
};

// SectionList 示例
const SectionListExample = () => {
  const data = [
    {
      title: '第一部分',
      data: ['项目 1', '项目 2'],
    },
    {
      title: '第二部分',
      data: ['项目 3', '项目 4'],
    },
  ];

  return (
    <SectionList
      sections={data}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.itemText}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section: { title } }) => (
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionHeaderText}>{title}</Text>
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  itemText: {
    fontSize: 16,
  },
  sectionHeader: {
    backgroundColor: '#f0f0f0',
    padding: 8,
  },
  sectionHeaderText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export { FlatListExample, SectionListExample };

导航

1. React Navigation

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 页面组件
const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>首页</Text>
      <Button
        title="跳转到详情页"
        onPress={() => navigation.navigate('Details', { id: 1 })}
      />
    </View>
  );
};

const DetailsScreen = ({ route }) => {
  const { id } = route.params;
  return (
    <View style={styles.container}>
      <Text>详情页 - ID: {id}</Text>
    </View>
  );
};

// 创建导航器
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 主标签导航
const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

// 根导航
const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={TabNavigator} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

状态管理

1. Redux 集成

// store/index.js
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';

const rootReducer = combineReducers({
  user: userReducer,
  cart: cartReducer,
});

const store = createStore(rootReducer);

// App.js
const App = () => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

// 使用 Redux
import { useSelector, useDispatch } from 'react-redux';

const UserProfile = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  return (
    <View>
      <Text>{user.name}</Text>
      <Button
        title="更新用户信息"
        onPress={() => dispatch(updateUser({ name: '新名字' }))}
      />
    </View>
  );
};

原生模块集成

1. 相机模块

import React, { useState } from 'react';
import { View, Button, Image } from 'react-native';
import { launchCamera } from 'react-native-image-picker';

const CameraExample = () => {
  const [image, setImage] = useState(null);

  const takePhoto = async () => {
    const result = await launchCamera({
      mediaType: 'photo',
      quality: 0.8,
    });

    if (result.assets && result.assets[0]) {
      setImage(result.assets[0].uri);
    }
  };

  return (
    <View>
      <Button title="拍照" onPress={takePhoto} />
      {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
};

2. 地理位置

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import Geolocation from '@react-native-community/geolocation';

const LocationExample = () => {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      (position) => {
        setLocation(position.coords);
      },
      (error) => console.log(error),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  }, []);

  return (
    <View>
      {location && (
        <Text>
          经度: {location.longitude}, 纬度: {location.latitude}
        </Text>
      )}
    </View>
  );
};

性能优化

1. 列表优化

import React from 'react';
import { FlatList, View, Text } from 'react-native';

const OptimizedList = () => {
  const renderItem = React.useCallback(({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  ), []);

  const keyExtractor = React.useCallback((item) => item.id.toString(), []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
};

2. 图片优化

import React from 'react';
import { Image } from 'react-native';

const OptimizedImage = () => {
  return (
    <Image
      source={{ uri: 'https://example.com/image.jpg' }}
      style={styles.image}
      resizeMode="cover"
      fadeDuration={0}
      onLoadStart={() => console.log('开始加载')}
      onLoad={() => console.log('加载完成')}
      onError={(error) => console.log('加载失败', error)}
    />
  );
};

调试工具

1. React Native Debugger

// 启用远程调试
import { DevSettings } from 'react-native';

// 在开发菜单中启用远程调试
DevSettings.reload();

// 使用 console.log 进行调试
console.log('调试信息');
console.warn('警告信息');
console.error('错误信息');

2. 性能监控

import { PerformanceObserver, performance } from 'react-native-performance';

const PerformanceExample = () => {
  useEffect(() => {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        console.log(`${entry.name}: ${entry.duration}ms`);
      }
    });

    observer.observe({ entryTypes: ['measure'] });

    return () => observer.disconnect();
  }, []);

  const measurePerformance = () => {
    performance.mark('start');
    // 执行需要测量的操作
    performance.mark('end');
    performance.measure('操作耗时', 'start', 'end');
  };
};

发布部署

1. iOS 发布

# 生成 iOS 发布证书
# 在 Xcode 中配置证书和描述文件

# 构建发布版本
cd ios
xcodebuild -workspace MyApp.xcworkspace -scheme MyApp -configuration Release

# 上传到 App Store
xcrun altool --upload-app -f MyApp.ipa -u username -p password

2. Android 发布

# 生成签名密钥
keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

# 配置签名信息
# 在 android/app/build.gradle 中添加签名配置

# 构建发布版本
cd android
./gradlew assembleRelease

# 生成 APK 文件
# 在 android/app/build/outputs/apk/release/ 目录下

最佳实践

1. 项目结构

src/
  ├── components/     # 可复用组件
  ├── screens/        # 页面组件
  ├── navigation/     # 导航配置
  ├── store/          # Redux 状态管理
  ├── services/       # API 服务
  ├── utils/          # 工具函数
  ├── assets/         # 静态资源
  └── App.js          # 应用入口

2. 代码规范

// .eslintrc.js
module.exports = {
  root: true,
  extends: [
    'react-native',
    'prettier',
  ],
  rules: {
    'react-native/no-inline-styles': 'error',
    'react-native/no-color-literals': 'error',
  },
};

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

总结

React Native 提供了强大的跨平台开发能力，通过合理使用框架特性和遵循最佳实践，可以构建出高性能、可维护的移动应用。

参考资源

• React Native 官方文档
• React Navigation 文档
• React Native 社区
• React Native 示例项目