React-Native：如何导入/使用RC实验组件，即SwipeableRow（0.27 rc）？

Question

我想知道如何在ReactNative RC中导入/使用/测试新组件？具体来说，我想导入并使用SwipeableRow components中的0.27.0-rc1。一旦我可以导入它，我可以在代码库中挖掘以了解参数和选项，但我甚至无法通过import步骤......

我通过npm安装了正确的标记版本，但是当我尝试导入组件时，它们显示为undefined：

import {
  ListView,
  ScrollView,
  StyleSheet,
  SwipeableListView,
  Text,
  TouchableHighlight,
  View
  } from 'react-native';

我收到的错误如下：

渲染代码（触发上述内容）：

render() {
    var ds = new SwipeableListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    blah blah blah
}

我还尝试将SwipeableRow文件夹移动为Libraries的孩子（而不是Libraries - ＆gt; Experimental - ＆gt; SwipeableRow，现在是Libraries - ＆gt; SwipeableRow）。同样的错误。

我尝试导入Experimental然后使用<Experimental.SwipeableRow.SwipeableListView>，但这也会引发“未定义不是对象”异常。

正如所建议的，我还尝试使用直接路径到节点模块进行导入：

import {
  SwipeableListView
} from '../../../node_modules/react-native/Libraries/Experimental/SwipeableRow';

结果导致：

Unable to resolve module ../../../node_modules/react-native/Libraries/Experimental/SwipeableRow from <source component path>: File <path>/node_modules/react-native/Libraries/Experimental/SwipeableRow/index doesnt exist

然后我尝试了：

import {
  SwipeableListView
} from '../../../node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableListView';

导致：

Unable to resolve module emptyFunction from <path>/Libraries/Experimental/SwipeableRow/SwipeableRow.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/emptyFunction and its parent directories. This might be related to github issue 4968 (paraphrasing).

有没有办法使用和测试这些实验组件？或者我只是要等待官方发布？

Answer 1

由于模块具有@providesModule注释，因此可以直接使用它。这是反应原生中使用的打包者特有的东西！

你可以做到

const SwipeableRow = require('SwipeableRow');
// or 
import SwipeableRow from 'SwipeableRow';

要修复空功能问题，只需将需要更改为以下内容：

const emptyFunction = require('fbjs/lib/emptyFunction'); 

等待next version出来。

Answer 2

请使用代码中有关如何使用SwipeableRow。

的文档

我会在时间允许的情况下编写代码外部的文档，但代码中有注释可以帮助您入门。

使用它的一般方法是：

1. 它是let ds = SwipeableListView.getNewDataSource()
2. 按照常规cloneWithRowsAndSections(..)执行ListView，检查SwipeableListView的来源，了解要提供的参数
3. 像SwipeableListView一样使用ListView;所以与ListView相同的道具以及SwipeableListView.js中描述的其他道具。 renderRow是可刷卡的顶部，renderQuickActions是刷卡时显示的底部。

然后你应该像ListView一样使用它，例如<SwipeableListView renderRow={..} renderQuickActions={..} {..someListViewProps} />

关于它。

Answer 3

我在这里是一个完整的新手，但在您提供的代码中，您正在从本机反应中导入SwipeableListView。如果我没有弄错的话，如果您使用了自己提供的链接中的.js，则必须从这些.js文件所在的路径中导入。我的意思的一个例子：

import { SwipeableListView } from './YourPathToTheJSFile'; 

我试着将此作为评论，因为我不确定这是正确的答案。我希望这会有所帮助。