React Native 开发速查：Awesome Cheatsheet 跨平台开发指南

React Native 开发速查：Awesome Cheatsheet 跨平台开发指南

【免费下载链接】awesome-cheatsheet :beers: awesome cheatsheet 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-cheatsheet

引言：跨平台开发的痛点与解决方案

你是否还在为同时维护 iOS 和 Android 两个原生应用而头疼？是否在寻找一种既能保证性能又能提高开发效率的跨平台方案？React Native（简称 RN）作为 Facebook 推出的跨平台移动应用开发框架，让开发者可以使用 JavaScript 和 React 的语法编写接近原生体验的移动应用。本文将基于 Awesome Cheatsheet 项目中的 React Native 相关资源，为你提供一份全面的开发速查指南，帮助你快速掌握 RN 开发的核心知识和实用技巧。

读完本文，你将能够：

• 快速搭建 React Native 开发环境
• 掌握常用组件和 API 的使用方法
• 解决布局和样式编写中的常见问题
• 实现页面导航和状态管理
• 进行调试和性能优化
• 了解常用的第三方库和工具

一、React Native 简介

1.1 React Native 的工作原理

React Native 采用了"Learn once, write anywhere"的理念，使用 JavaScript 和 React 语法构建原生移动应用。它不同于传统的混合应用框架（如 Cordova），而是通过 JavaScript 桥接（JS Bridge）将 React 组件转换为原生组件，从而实现接近原生的性能。

（注：由于项目中未提供 React Native 相关图片，此处使用网络图示意，实际使用时建议替换为项目内图片）

1.2 React Native 与其他跨平台方案的对比

特性	React Native	Flutter	Cordova	原生开发
开发语言	JavaScript/TypeScript	Dart	HTML/CSS/JS	Java/Kotlin (Android), Swift/Objective-C (iOS)
性能	接近原生	接近原生	较低	最高
热重载	支持	支持	支持	不支持
社区生态	成熟	快速增长	成熟	最成熟
学习曲线	中等（熟悉 React 者较低）	中等	低	高

二、开发环境搭建

2.1 环境要求

• Node.js (v14.0.0 或更高版本)
• Python (v3.6 或更高版本)
• JDK (v11 或更高版本)
• Android Studio (用于 Android 开发)
• Xcode (用于 iOS 开发，仅 Mac)

2.2 快速初始化项目

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

# 使用 TypeScript 模板
npx react-native init MyProject --template react-native-template-typescript

# 启动 Metro  bundler
npx react-native start

# 运行 Android 应用
npx react-native run-android

# 运行 iOS 应用
npx react-native run-ios

2.3 环境配置常见问题

• Android 模拟器无法启动：检查 Android SDK 路径是否正确配置，确保模拟器已安装并启用 Intel HAXM 或 ARM 翻译器。
• iOS 编译错误：确保已安装 Xcode 命令行工具，执行 xcode-select --install 安装。
• Node 版本问题：使用 nvm 或 fnm 管理多个 Node 版本，确保项目使用推荐版本。

三、核心组件与 API

3.1 基础组件

React Native 提供了一系列基础组件，用于构建用户界面。以下是一些常用组件及其用法：

3.1.1 View

View 是 RN 中最基础的容器组件，类似于 HTML 中的 div。

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

export default App;

3.1.2 Text

Text 组件用于显示文本，支持嵌套和样式继承。

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

const App = () => {
  return (
    <Text style={styles.title}>
      Hello React Native
      <Text style={styles.highlight}> 跨平台开发</Text>
    </Text>
  );
};

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  highlight: {
    color: '#0066cc',
  },
});

export default App;

3.1.3 Image

Image 组件用于显示图片，支持本地图片和网络图片。

import React from 'react';
import { Image, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      {/* 本地图片 */}
      <Image source={require('./assets/logo.png')} style={styles.logo} />
      
      {/* 网络图片 */}
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={styles.remoteImage}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 100,
    height: 100,
    marginBottom: 20,
  },
  remoteImage: {
    width: 200,
    height: 200,
    resizeMode: 'cover',
  },
});

export default App;

3.1.4 TextInput

TextInput 组件用于接收用户输入。

import React, { useState } from 'react';
import { TextInput, View, StyleSheet, Text } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="请输入文本"
        value={text}
        onChangeText={setText}
        keyboardType="default"
        returnKeyType="done"
        autoCapitalize="sentences"
      />
      <Text>你输入的文本：{text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
    marginBottom: 20,
  },
});

export default App;

3.2 常用 API

3.2.1 导航 API

React Native 本身不提供导航功能，需要使用第三方库，如 React Navigation。

// 安装 React Navigation
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

// 安装栈导航器
npm install @react-navigation/native-stack

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

3.2.2 网络请求 API

使用 Fetch API 或 Axios 进行网络请求。

// 使用 Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 使用 Async/Await
const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

// 使用 Axios
import axios from 'axios';

const fetchDataWithAxios = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

四、布局与样式

4.1 Flexbox 布局

React Native 使用 Flexbox 进行布局，与 Web 上的 Flexbox 类似，但有一些差异。

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 主轴方向：row (水平) 或 column (垂直，默认)
    justifyContent: 'center', // 主轴对齐方式
    alignItems: 'center', // 交叉轴对齐方式
    gap: 10, // 元素间距
    padding: 20,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
    alignSelf: 'flex-end', // 单独设置交叉轴对齐方式
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

export default App;

4.2 StyleSheet

使用 StyleSheet.create 创建样式，提高性能和代码可读性。

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>这是标题</Text>
      <Text style={styles.subtitle}>这是副标题</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
  },
});

export default App;

五、状态管理

5.1 useState Hook

用于管理组件内部的状态。

import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';

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

  return (
    <View style={styles.container}>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        <Button title="-" onPress={() => setCount(count - 1)} />
        <Button title="+" onPress={() => setCount(count + 1)} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  count: {
    fontSize: 48,
    margin: 20,
  },
  buttons: {
    flexDirection: 'row',
    gap: 20,
  },
});

export default Counter;

5.2 useContext Hook

用于在组件树中共享状态。

import React, { createContext, useContext, useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// 创建上下文
const ThemeContext = createContext();

// 提供者组件
const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);
  };

  const theme = {
    isDarkMode,
    toggleTheme,
    colors: isDarkMode ? { background: '#333', text: '#fff' } : { background: '#fff', text: '#333' },
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

// 使用上下文的组件
const ThemedText = ({ children }) => {
  const { colors } = useContext(ThemeContext);
  return <Text style={{ color: colors.text }}>{children}</Text>;
};

const ThemeToggle = () => {
  const { toggleTheme, isDarkMode } = useContext(ThemeContext);
  return (
    <Button
      title={isDarkMode ? '切换到浅色模式' : '切换到深色模式'}
      onPress={toggleTheme}
    />
  );
};

// 应用组件
const App = () => {
  return (
    <ThemeProvider>
      <View style={[styles.container, { backgroundColor: useContext(ThemeContext).colors.background }]}>
        <ThemedText>这是一个支持主题切换的文本</ThemedText>
        <ThemeToggle />
      </View>
    </ThemeProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
});

export default App;

5.3 Redux

对于复杂应用，推荐使用 Redux 进行状态管理。

# 安装 Redux 相关依赖
npm install @reduxjs/toolkit react-redux

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// App.js
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store/store';
import { increment, decrement } from './store/counterSlice';
import { View, Text, Button, StyleSheet } from 'react-native';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>
      <Text style={styles.count}>{count}</Text>
      <View style={styles.buttons}>
        <Button title="-" onPress={() => dispatch(decrement())} />
        <Button title="+" onPress={() => dispatch(increment())} />
      </View>
    </View>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  count: {
    fontSize: 48,
    margin: 20,
  },
  buttons: {
    flexDirection: 'row',
    gap: 20,
  },
});

export default App;

六、调试与性能优化

6.1 调试工具

6.1.1 React Native Debugger

React Native Debugger 是一个独立的应用，提供了 Redux DevTools 和 Chrome DevTools 的功能。

# 安装 React Native Debugger
# 从 https://github.com/jhen0409/react-native-debugger/releases 下载对应平台的安装包

6.1.2 Flipper

Flipper 是 Facebook 推出的移动应用调试平台，支持 React Native。

# 安装 Flipper
# 从 https://fbflipper.com/ 下载对应平台的安装包

6.2 性能优化技巧

6.2.1 使用 memo 优化组件渲染

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

// 使用 memo 包装组件，避免不必要的重渲染
const UserCard = memo(({ user }) => {
  console.log('UserCard 渲染');
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{user.name}</Text>
      <Text style={styles.email}>{user.email}</Text>
    </View>
  );
});

const styles = StyleSheet.create({
  card: {
    padding: 10,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  email: {
    color: 'gray',
  },
});

export default UserCard;

6.2.2 列表优化

使用 FlatList 代替 ScrollView 渲染长列表，提高性能。

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

const DATA = Array.from({ length: 1000 }, (_, i) => ({
  id: i.toString(),
  title: `Item ${i + 1}`,
}));

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => <Item title={item.title} />;

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      getItemLayout={(data, index) => ({
        length: 50,
        offset: 50 * index,
        index,
      })}
      initialNumToRender={10}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    height: 50,
    justifyContent: 'center',
    paddingHorizontal: 10,
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
  },
  title: {
    fontSize: 16,
  },
});

export default App;

七、常用第三方库

7.1 UI 组件库

• react-native-paper：遵循 Material Design 的 UI 组件库
• native-base：跨平台的 UI 组件库
• react-native-elements：简洁易用的 UI 组件库

7.2 表单处理

• react-hook-form：高性能、灵活的表单验证库
• formik：完整的表单管理库，支持验证

7.3 状态管理

• @reduxjs/toolkit：Redux 官方推荐的工具集
• mobx-state-tree：基于 MobX 的状态管理库
• zustand：轻量级的状态管理库，API 简洁

7.4 导航

• @react-navigation：React Native 官方推荐的导航库
• react-native-navigation：Wix 开发的原生导航库，性能优秀

7.5 网络请求

• axios：基于 Promise 的 HTTP 客户端
• react-query：数据获取和缓存库

7.6 其他工具库

• react-native-reanimated：高性能动画库
• react-native-gesture-handler：手势处理库
• react-native-svg：SVG 支持库

八、项目实战：TODO 应用

8.1 项目结构

todo-app/
├── App.js
├── app.json
├── babel.config.js
├── package.json
├── src/
│   ├── components/
│   │   ├── TodoItem.js
│   │   └── TodoInput.js
│   ├── screens/
│   │   └── HomeScreen.js
│   └── store/
│       ├── index.js
│       └── todoSlice.js
└── assets/
    └── icon.png

8.2 实现 TodoInput 组件

// src/components/TodoInput.js
import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

const TodoInput = ({ onAddTodo }) => {
  const [text, setText] = useState('');

  const handleAddTodo = () => {
    if (text.trim()) {
      onAddTodo(text);
      setText('');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="输入新任务..."
        value={text}
        onChangeText={setText}
        onSubmitEditing={handleAddTodo}
      />
      <Button title="添加" onPress={handleAddTodo} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    gap: 10,
    marginBottom: 20,
  },
  input: {
    flex: 1,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
  },
});

export default TodoInput;

8.3 实现 TodoItem 组件

// src/components/TodoItem.js
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const TodoItem = ({ todo, onToggle, onDelete }) => {
  return (
    <View style={styles.item}>
      <TouchableOpacity onPress={() => onToggle(todo.id)}>
        <MaterialCommunityIcons
          name={todo.completed ? 'check-circle' : 'circle-outline'}
          size={24}
          color={todo.completed ? 'green' : 'gray'}
        />
      </TouchableOpacity>
      <Text style={[styles.text, todo.completed && styles.completedText]}>
        {todo.text}
      </Text>
      <TouchableOpacity onPress={() => onDelete(todo.id)}>
        <MaterialCommunityIcons name="delete" size={24} color="red" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    padding: 10,
    borderBottomColor: '#eee',
    borderBottomWidth: 1,
  },
  text: {
    flex: 1,
    fontSize: 16,
  },
  completedText: {
    textDecorationLine: 'line-through',
    color: 'gray',
  },
});

export default TodoItem;

8.4 创建 Redux Store

// src/store/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = [
  { id: '1', text: '学习 React Native', completed: false },
  { id: '2', text: '开发 TODO 应用', completed: true },
];

export const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      const newTodo = {
        id: Date.now().toString(),
        text: action.payload,
        completed: false,
      };
      state.push(newTodo);
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
    deleteTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload);
    },
  },
});

export const { addTodo, toggleTodo, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

export default configureStore({
  reducer: {
    todos: todoReducer,
  },
});

8.5 实现 HomeScreen

// src/screens/HomeScreen.js
import React from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo, deleteTodo } from '../store/todoSlice';
import TodoInput from '../components/TodoInput';
import TodoItem from '../components/TodoItem';

const HomeScreen = () => {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = (text) => {
    dispatch(addTodo(text));
  };

  const handleToggleTodo = (id) => {
    dispatch(toggleTodo(id));
  };

  const handleDeleteTodo = (id) => {
    dispatch(deleteTodo(id));
  };

  return (
    <View style={styles.container}>
      <TodoInput onAddTodo={handleAddTodo} />
      <FlatList
        data={todos}
        renderItem={({ item }) => (
          <TodoItem
            todo={item}
            onToggle={handleToggleTodo}
            onDelete={handleDeleteTodo}
          />
        )}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default HomeScreen;

8.6 配置 App.js

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './src/store';
import HomeScreen from './src/screens/HomeScreen';

function App() {
  return (
    <Provider store={store}>
      <HomeScreen />
    </Provider>
  );
}

export default App;

九、总结与展望

本文基于 Awesome Cheatsheet 项目中的 React Native 相关资源，为你提供了一份全面的开发速查指南。我们从 React Native 的基本概念和环境搭建开始，介绍了常用组件、API、布局样式、状态管理、调试优化等内容，并通过一个 TODO 应用的实战案例展示了如何将这些知识应用到实际开发中。

React Native 生态系统正在不断发展，新的库和工具层出不穷。未来，随着 WebAssembly 等技术的发展，React Native 的性能和功能还将进一步提升。建议你持续关注 Awesome Cheatsheet 项目，获取最新的 React Native 开发资源和技巧。

如果你觉得本文对你有帮助，请点赞、收藏并关注我们，以便获取更多优质的技术文章。下期我们将介绍 React Native 与原生模块的交互，敬请期待！

附录：常用资源链接

• React Native 官方文档
• React Navigation 文档
• Redux Toolkit 文档
• Awesome Cheatsheet React Native 相关资源（在项目中搜索 "react-native" 即可找到）
• React Native 社区论坛
• React Native 中文网

【免费下载链接】awesome-cheatsheet :beers: awesome cheatsheet 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-cheatsheet