Ubuntu14.04环境下react-360 init命令未创建项目目录问题求助

嗨，我之前在老版本Ubuntu环境里折腾react-360的时候也碰到过类似的坑，咱们一步步来排查解决：

1. 先确认react-360-cli是否真的正常安装 #

• 首先执行以下命令检查CLI是否可用：

  react-360 --version
  

• 如果命令报错提示“command not found”，大概率是全局npm包的路径没加到系统环境变量里。你可以先确认包是否存在：

  npm list -g react-360-cli
  

• 如果输出里能看到这个包，找到它的安装路径（通常是/usr/local/lib/node_modules/react-360-cli），然后直接用绝对路径执行init命令试试：

  /usr/local/lib/node_modules/react-360-cli/bin/react-360.js init Hello
  

2. 排查权限与目录写入问题 #

• Ubuntu下全局安装npm包时如果用了sudo，可能导致后续init命令没有当前目录的写入权限。试试切换到用户主目录再执行命令：

  cd ~
  react-360 init Hello
  

• 如果还是不行，可以临时用sudo尝试（不推荐长期用sudo操作npm，后续最好用nvm管理Node版本来避免权限问题）：

  sudo react-360 init Hello
  

3. 检查Node.js版本兼容性 #

• Ubuntu 14.04默认的Node.js版本可能太老（比如v0.10.x），而react-360-cli需要至少Node.js v8.0以上的版本支持。先检查你的Node版本：

  node --version
  

• 如果版本过低，建议用nvm来安装一个兼容的LTS版本：

  # 安装nvm
  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  # 重启终端后安装Node v14（react-360对这个版本兼容性较好）
  nvm install 14
  nvm use 14
  # 重新安装react-360-cli
  npm install -g react-360-cli
  

4. 查看详细错误日志 #

• 如果执行init命令时没有任何输出，试试加上--verbose参数查看详细日志，能帮你定位是依赖安装失败还是其他问题：

  react-360 init Hello --verbose
  

• 比如如果是网络问题导致npm安装依赖卡住，可以切换国内npm镜像源：

  npm config set registry https://registry.npmmirror.com
  

5. 手动初始化项目作为备选 #

如果上面的方法都不行，你可以手动创建项目结构：

• 创建项目目录并进入：

  mkdir Hello && cd Hello
  

• 初始化npm项目：

  npm init -y
  

• 安装react-360核心依赖：

  npm install react-360 react-360-web react-dom
  

• 在项目根目录创建index.js（核心逻辑文件）：

  import React from 'react';
  import { AppRegistry, StyleSheet, Text, View } from 'react-360';
  
  export default class Hello extends React.Component {
    render() {
      return (
        <View style={styles.panel}>
          <View style={styles.greetingBox}>
            <Text style={styles.greeting}>Hello, React 360!</Text>
          </View>
        </View>
      );
    }
  };
  
  const styles = StyleSheet.create({
    panel: {
      width: 1000,
      height: 600,
      backgroundColor: 'rgba(255, 255, 255, 0.4)',
      justifyContent: 'center',
      alignItems: 'center',
    },
    greetingBox: {
      padding: 20,
      backgroundColor: '#000000',
      borderColor: '#639dda',
      borderWidth: 2,
    },
    greeting: {
      fontSize: 30,
      color: '#ffffff',
    },
  });
  
  AppRegistry.registerComponent('Hello', () => Hello);
  

• 创建client.js（客户端入口文件）：

  import { ReactInstance } from 'react-360-web';
  
  function init(bundle, parent, options = {}) {
    const r360 = new ReactInstance(bundle, parent, {
      fullScreen: true,
      ...options,
    });
    r360.renderToSurface(
      r360.createRoot('Hello'),
      r360.getDefaultSurface()
    );
  }
  
  window.React360 = { init };
  

• 在package.json的scripts里添加启动命令：

  "scripts": {
    "start": "react-360 start"
  }
  

之后执行npm start就能启动项目了。

内容的提问来源于stack exchange，提问作者user4016337