React Native：命令“run-android”未被识别。可能是由于npm install引起的。

Question

最近我遇到了这个问题，当我安装一个React Native包（例如react-navigation）到我的项目中时，一堆包都被删除了（包括React和React Native）。然后当我尝试运行命令"run-android"时，它说无法识别。我最近更新了最新的npm和react-native-cli。是"npm install"或react-native出了问题吗？

node version: 8.1.2 <br/>
react-native-cli: 2.0.1 <br/>
react-native: 0.45.1 <br/>
react-navigation: 1.0.0-beta.11

以下是重新创建的步骤：

• 第一步-创建项目。

• 第二步-运行“run-android”命令（此操作有效）。

• 第三步-将“react-native-navigation”安装到项目中。

注意：本文中涉及的HTML标签已保留。

Notice in the image above. Seems like all the other packages are removed from the project.<br/><br/>

• 步骤 4 - 再次尝试运行 "run-android" 命令。（之前能够正常工作，但现在会失败）

有什么问题的想法和解决方法吗？

- Yeshan Jay

---

你安装了React Native CLI吗？ - locropulenton

是的 @alejandrogarciarobles。我已经更新了问题并提供了版本信息。 - Yeshan Jay

你有检查过在 node_modules 中是否有任何被删除的 React Native 文件吗？ - Ray

是的 @Raymond。除了 react-navigation（根据上面的示例）之外，所有包都已清空。它们中只剩下很少的文件。 - Yeshan Jay

npm install 命令将能够运行。 - KAMAL VERMA

Answer 1

在这里找到了解决方案（链接）。

最初运行npm install没有起作用，但是，删除package-lock.json文件并运行npm install就可以了。

之后，我单独安装了react-navigation包，它也正常工作了。

- Yeshan Jay

---

似乎在最初创建项目时，如果已安装了 yarn，后续安装其他包/依赖项时会与 npm 冲突。这就是为什么我们必须使用 npm install（仅一次）删除并重新安装 node_module 包的原因。 - Yeshan Jay

Answer 2

以下是我从头到尾的解决方案。

1. react-native init NavTest （使用此命令本地安装cli）
2. 删除package-lock.json文件
3. npm install --save react-navigation
4. 删除生成的package-lock.json文件
5. npm install
6. react-native run android 有点丑，我不完全知道发生了什么，但这个方法可行。 https://reactnavigation.org/提供了运行示例代码。

或将此复制到index.android.js中。

import React, { Component } from 'react';
import { 
  AppRegistry,
  Button,
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';



class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('Profile', { name: 'Jane' })
        }
      />
    );
  }
}

class ProfileScreen extends Component{
  static navigationOptions = {
    title: 'Jane',
  };
  render() {
    return (null);
  }
}

const NavTest= StackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

AppRegistry.registerComponent('NavTest', () => NavTest);

- codejays