Phản ứng tự nhiên: cách nhập/sử dụng các thành phần thử nghiệm RC, tức là SwipeableRow (0,27 rc)?

Question

Tôi tự hỏi làm cách nào để nhập/sử dụng/thử nghiệm các thành phần mới trong RC phản ứng? Cụ thể, tôi muốn nhập và sử dụng SwipeableRow components trong 0.27.0-rc1. Khi tôi có thể nhập, tôi có thể tìm hiểu thông số và tùy chọn, nhưng tôi thậm chí không thể vượt qua bước import ...

Tôi có bản phát hành được gắn thẻ phù hợp được cài đặt qua npm nhưng khi tôi cố gắng nhập khẩu các linh kiện, chúng hiển thị như undefined:

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

tôi nhận được lỗi như:

Render mã (kích hoạt trên):

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

Tôi cũng đã cố gắng di chuyển các thư mục SwipeableRow là một đứa trẻ của Libraries (thay vì Libraries ->Experimental ->SwipeableRow, bây giờ nó là Libraries ->SwipeableRow). Lỗi tương tự.

Tôi đã thử nhập Experimental và sau đó sử dụng <Experimental.SwipeableRow.SwipeableListView>, nhưng điều đó cũng ném ngoại lệ "Không xác định không phải là đối tượng".

Như đã đề cập, tôi cũng đã cố gắng nhập khẩu bằng cách sử dụng một đường dẫn trực tiếp đến các mô-đun nút:

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

Đó dẫn:

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 

Sau đó tôi đã cố gắng:

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

Kết quả là:

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). 

Có cách nào để sử dụng và kiểm tra các thành phần thử nghiệm này không? Hay tôi chỉ phải đợi bản phát hành chính thức?

Answer 1

Vì mô-đun có chú thích @providesModule, bạn có thể yêu cầu chú thích trực tiếp. Đây là một cái gì đó cụ thể cho các packager được sử dụng trong phản ứng bản địa!

Bạn chỉ có thể làm

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

Và để khắc phục vấn đề chức năng trống rỗng, chỉ cần thay đổi yêu cầu như sau:

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

trong khi chờ đợi next version để đi ra.

Answer 2

Tôi là người mới hoàn thành ở đây, nhưng trong mã bạn đã cung cấp, bạn đang nhập SwipeableListView từ gốc tự do. Nếu tôi không nhầm, nếu bạn sử dụng .js từ liên kết bạn đã cung cấp, bạn phải nhập từ đường dẫn của bạn nơi các tệp .js đó nằm. Một ví dụ về ý tôi là:

import { SwipeableListView } from './YourPathToTheJSFile'; 

Tôi đã cố gắng để lại nhận xét này vì tôi không chắc đây là câu trả lời đúng. Tôi hi vọng cái này giúp được.

Answer 3

Vui lòng sử dụng tài liệu trong mã về cách sử dụng SwipeableRow.

Tôi sẽ viết tài liệu bên ngoài mã theo thời gian cho phép, nhưng có nhận xét trong mã sẽ giúp bạn bắt đầu.

Cách chung để sử dụng nó là:

1. Đó là let ds = SwipeableListView.getNewDataSource()
2. Làm thường cloneWithRowsAndSections(..) như bạn sẽ bất kỳ khác ListView, kiểm tra nguồn gốc của SwipeableListView cho những gì params để cung cấp
3. Sử dụng SwipeableListView như bạn sẽ ListView; cùng các đạo cụ như ListView với các đạo cụ bổ sung được mô tả trong SwipeableListView.js. renderRow là phần trên cùng có thể vuốt được, renderQuickActions là phần dưới cùng được hiển thị khi được vuốt.

Sau đó, bạn nên sử dụng nó giống như bạn sẽ ListView, ví dụ: một cái gì đó giống như <SwipeableListView renderRow={..} renderQuickActions={..} {..someListViewProps} />

Đó là về nó.