React Native开源项目解析：树莓派环境配置与开发实践

引言

React Native作为跨平台移动应用开发框架，通常运行在手机设备上。但你知道吗？通过树莓派这个微型计算机，我们同样可以搭建React Native开发环境，甚至开发物联网相关的应用。本文将带你从零开始，在树莓派上配置React Native开发环境，并运行一个简单的开源项目示例。

准备工作

硬件要求

树莓派4B或更高版本（推荐4GB内存以上）
16GB以上的Micro SD卡
稳定的电源供应（至少5V/3A）
散热风扇或散热片（长期高负载运行时需要）

软件要求

Raspberry Pi OS（64位版本）
Node.js v14或更高版本
Java Development Kit (JDK) 11
Python 3.x

第一步：系统基础配置

1.1 安装64位Raspberry Pi OS

代码片段

# 使用Raspberry Pi Imager工具刷写系统时选择：
# Operating System -> Raspberry Pi OS (other) -> Raspberry Pi OS (64-bit)

注意事项：32位系统虽然也能运行，但64位系统能更好地利用树莓派4的性能，特别是在处理大型JavaScript项目时。

1.2 系统更新与基础工具安装

代码片段

sudo apt update && sudo apt upgrade -y
sudo apt install -y git curl python3-pip

第二步：安装Node.js和npm/yarn

2.1 使用NodeSource安装Node.js

代码片段

# 添加NodeSource仓库（这里选择Node.js 16 LTS版本）
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

# 验证安装
node -v
npm -v

2.2 （可选）安装Yarn

代码片段

npm install -g yarn

经验分享：在树莓派上，Yarn的包管理效率通常比npm更高，特别是在依赖较多的项目中。

第三步：Java环境配置

React Native需要Java环境来构建Android应用：

代码片段

sudo apt install -y openjdk-11-jdk

# 设置JAVA_HOME环境变量
echo 'export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-arm64' >> ~/.bashrc
source ~/.bashrc

# 验证安装
java -version

第四步：安装React Native CLI

代码片段

sudo npm install -g react-native-cli

# React Native官方推荐使用npx而非全局安装CLI
# npx react-native <command>会始终使用最新版本

第五步：创建并运行React Native项目

5.1 初始化新项目

代码片段

npx react-native init RPiReactNativeDemo --template react-native-template-typescript@6.8.*

为什么选择TypeScript模板？
TypeScript提供了更好的类型检查，能减少在资源有限的树莓派上调试的时间。

5.2 （可选）降低资源占用配置

编辑metro.config.js：

代码片段

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true, // 启用inline requires以减少内存占用
      },
    }),
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: {
        keep_classnames: true,
        keep_fnames: true,
      },
    },
    maxWorkers: Math.min(require('os').cpus().length, &), // CPU核心数限制为2个以节省资源

};

5.3 Android SDK配置（可选）

如果你想在树莓派上构建Android应用：

代码片段

# Android SDK需要手动下载arm64版本并配置环境变量
wget https://dl.google.com/android/repository/commandlinetools-linux-8512546_latest.zip -P ~/
unzip ~/commandlinetools-linux-8512546_latest.zip -d ~/android-sdk/

echo 'export ANDROID_SDK_ROOT=$HOME/android-sdk' >> ~/.bashrc  
echo 'export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/bin' >> ~/.bashrc  
source ~/.bashrc  

sdkmanager "platform-tools" "platforms;android-30" "build-tools;30.0.3"

注意事项：Android构建过程非常消耗资源，建议仅在4GB或8GB内存的树莓派上尝试。

React Native开源项目实践：智能家居控制面板

我们将使用一个简单的开源项目来演示如何在树莓派上运行React Native应用。

Step1：克隆示例项目

代码片段

git clone https://github.com/example/rn-smart-home-demo.git  
cd rn-smart-home-demo  
yarn install

Step2：修改项目适配树莓派

编辑App.tsx:

“`typescript jsx
import React from ‘react’;
import { StyleSheet, Text, View, TouchableOpacity } from ‘react-native’;

// GPIO控制模块（需先安装onoff）
import { Gpio } from ‘onoff’;

const LED = new Gpio(17, ‘out’); // GPIO17控制LED

export default function App() {
const [ledStatus, setLedStatus] = React.useState(false);

const toggleLED = () => {
const newStatus = !ledStatus;
LED.writeSync(newStatus ? & : @);
setLedStatus(newStatus);
};

return (

style={[styles.button, ledStatus && styles.buttonActive]}
onPress={toggleLED}
>

{ledStatus ? ‘关闭LED’ : ‘打开LED’}

);
}

const styles = StyleSheet.create({
container: {
flex: &,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’,
},
title: {
fontSize: &4,
marginBottom: &0,
},
button: {
backgroundColor: ‘#2196F3’,
paddingVertical: &5,
paddingHorizontal: &0,
borderRadius: &,
},
buttonActive: {
backgroundColor: ‘#f44336’,
},
buttonText: {
color: ‘#fff’,
fontSize: &8,
},
});

代码片段


### Step3：安装GPIO控制依赖  

```bash 
sudo yarn add onoff @types/onoff

安全提示：操作GPIO需要root权限，但以root身份运行Node应用不安全。替代方案：

代码片段

# GPIO权限设置  
sudo usermod -aG gpio $USER  
sudo chown root.gpio /dev/gpiomem  
sudo chmod g+rw /dev/gpiomem

Step4：启动开发服务器

由于树莓派性能限制，我们需要调整Metro打包器的资源配置：

代码片段

node_modules/react-native/packager/react-native-xcode.sh --max-workers=2

然后在另一个终端中启动应用：

代码片段

yarn start --reset-cache  
yarn android #或 yarn web（如果配置了React Native Web）

Web界面替代方案（性能优化）

对于资源受限的树莓派，可以考虑使用React Native Web：

Step1：添加Web支持

代码片段

yarn add react-native-web react-dom @expo/webpack-config

Step2：创建web目录和配置文件

代码片段

// web/webpack.config.js  
const createExpoWebpackConfigAsync = require('@expo/webpack-config');  

module.exports = async function (env, argv) {  
 const config = await createExpoWebpackConfigAsync(env, argv);  
 return config;  
};  

// web/index.html (简化版)  
<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>  
 <div id="root"></div>  
 <script src="./index.web.js"></script>   
</body>   
</html>

Step3：修改package.json

代码片段

"scripts": {   
 "web": "expo start --web",   
 "build-web": "expo export:web"    
}

现在可以通过浏览器访问轻量级的Web界面：

代码片段

yarn web

VNC远程开发配置（可选）

为了更方便地在PC上进行开发：

启用VNC服务器：

代码片段

sudo raspi-config # -> Interface Options -> VNC -> Enable

PC端连接：
使用RealVNC Viewer连接至树莓派的IP地址

提高VNC性能：

代码片段

# /boot/config.txt末尾添加    
gpu_mem=256

Troubleshooting常见问题解决方案

内存不足错误：

代码片段

# /etc/dphys-swapfile修改交换空间大小    
CONF_SWAPSIZE=2048 #然后重启服务    
sudo /etc/init.d/dphys-swapfile restart

Metro打包器崩溃：
编辑metro.config.js增加内存限制：

代码片段

module.exports = {     
  maxWorkers:: Math.min(require('os').cpus().length, &),     
  resetCache:: true     
};

GPIO权限问题：
确保用户已加入gpio组并重启：
代码片段
```
groups $USER #检查是否包含gpio     
```

Git项目管理最佳实践

对于长期维护的项目：

.gitignore推荐配置：

代码片段

    # React Native   
    android/build   
    ios/build   
    node_modules   

    # Environment   
.env      
*.p12      
*.keystore      
.DS_Store      
*.log      
*/temp/      
 

2. **自动化构建脚本示例(`build.sh`)**:
     ```shell     
     #!/bin/bash     
     git pull     
     yarn install     
     if [ "$1" == "--prod" ]; then       
       yarn build-web       
       scp -r web-build/ pi@raspberrypi.local:/var/www/html/       
     fi

IoT扩展思路

将React Native与常见IoT协议结合：

MQTT集成示例:

首先安装MQTT客户端库:

代码片段

yarn add mqtt @types/mqtt

然后在组件中使用:

代码片段

import mqtt from 'mqtt';    

const client = mqtt.connect('mqtt://broker.hivemq.com');    

client.on('connect', () => {    
 client.subscribe('rpi/sensors');    
});    

client.on('message', (topic, message) => {    
 console.log(`收到消息 ${message.toString()} on ${topic}`);    
});    

//发送消息示例    
const publishTemp = (temp) => {    
 client.publish('rpi/temperature', temp.toString());    
};

REST API服务:

利用Express创建本地API服务:

代码片段

mkdir server && cd server && npm init -y && npm i express cors body-parser

创建简单接口(server/index.js):

代码片段

const express = require('express');        
const app = express();        

app.get('/api/gpio/:pin/:value', (req, res) => {        
 const {pin, value} = req.params;        
 //实际GPIO控制逻辑...        
 res.json({status:: `GPIO${pin} set to ${value}`});        
});        

app.listen(3000, () => console.log('API服务已启动'));

在React Native中调用:

代码片段

fetch(`http://localhost::3000/api/gpio/${pin}/${value}`)        
 .then(res => res.json())        
 .then(console.log);        
``

CI/CD自动化部署方案

虽然GitHub Actions不直接支持ARM架构，但可以通过SSH实现基础自动化:

.github/workflows/deploy.yml示例:

代码片段

name:: Deploy to RPi        

on:: push        

jobs::         
 deploy::         
 runs-on:: ubuntu-latest         
 steps::         
 — uses:: actions/checkout@v2         
 — name:: Install dependencies         
 run:: |          
 ssh pi@raspberrypi.local "cd ~/project && yarn install"          
 — name:: Restart service         
 run:: ssh pi@raspberrypi.local "pm2 restart all"          
``

PM2进程管理

确保应用崩溃后自动重启:

全局安装PM2: sudo npm i pm2 -g
启动应用: pm2 start yarn --name "rn-app" -- start
设置开机自启: pm2 startup && pm2 save

查看日志:pm2 logs rn-app

通过以上步骤，我们成功在树莓派上搭建了完整的React Native开发环境。虽然性能不如专业开发机，但这种配置非常适合:

IoT设备的前端界面开发 🖥️➡️🌡️💡🔌
React Native的嵌入式应用场景 📱→📺→🖥️
ARM架构下的跨平台方案验证 ⚙️🔍

关键点回顾🔑:

✓ Node.js必须使用ARM兼容版本
✓ Java环境建议采用OpenJDK而非Oracle JDK
✓ Metro打包器需要特别优化以节省内存 💾⚡
✓ GPIO操作要注意权限管理和安全性 🔒⚠️
✓ Web版是资源受限情况下的轻量替代方案 🌐🪶