Question

我遇到一个问题，实例化react-native然后使用它的列表视图。

var ReactNative = require('react-native');

var MyClass = React.createClass({
...
    render: function(){
    ...
    );
    }
}

我们在react-native-implementation.js

中有以下内容

...

  get AccessibilityInfo() { return require('AccessibilityInfo'); },
  get ActivityIndicator() { return require('ActivityIndicator'); },
  get ART() { return require('ReactNativeART'); },
...

它有大约90个这样的get语句。当webpack运行时，它会在每个单独的错误中出错。 Webpack在第一次获取时会出现以下错误，其余名称对应（AccessibilityInfo，然后是ActivityIndicator，然后是ReactNativeART等）。

C中的错误：/Directory/~/react-native/Libraries/react-native/react-native-implementation.js

找不到模块：错误：无法解析'C：\ Directory \ node_modules \ react-native \ Libraries \ react-native'中的'AccessibilityInfo' @ C：/Directory/~/react-native/Libraries/react-native/react-native-implementation.js 31：35-63 @ ./Directory/MyClass.jsx

所有这些都在哪里获得相应的NPM安装？我没有安装它们，但我不能做npm安装AccessibilityInfo。那我错过了什么？

此外，通过facebook的github.io：

与以下内容有什么不同

import { AppRegistry, ListView, Text, View } from 'react-native';

VS

var ReactNative = require('react-native');

我假设我要从React-Native而不仅仅是listview中提取所有内容。使用var获取ListView时是否有更好的语法？我是否可以执行以下操作（由于之前的错误，我目前无法对此进行测试）：？

var {ListView} require('react-native');

Answer 1

您不能只将React Native添加到Web项目并期望它能够正常工作。 React Native通常意味着在移动设备上运行，同时由本机（Java或Objective-C）代码（执行实际渲染）支持。 React Native提供的实际组件大多是用本机代码编写的。

如果要在Web项目中使用React Native，则需要使用某种框架来提供React Native提供的本机组件的Web版本。一个例子是react-native-web。

至于你的第二个问题，ES6导入

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

等同于使用require的以下语句：

var { ListView, View, Text } = require('react-native');

但是，由于此声明使用destructuring assignment，它仍然需要ES2015 - 使用ES5无法做到这一点。

使用React ListView不正确

1 个答案: