2015-04-14 38 views
16

Tôi đang phát triển một ứng dụng danh sách đơn giản bằng React Native, vấn đề của tôi là: Tôi đã là NavigatorIOS ở gốc của dự án, với một thành phần chứa ListView như ban đầu tuyến đường và nút thanh điều hướng dẫn đến chế độ xem tác vụ.Phản hồi dữ liệu truyền thống gốc giữa các chế độ xem anh chị em

Khi tác vụ mới đã được tạo, chế độ xem sẽ bật để Chế độ xem danh sách được hiển thị. Tôi đang cố gắng thêm nhiệm vụ mới được tạo của tôi vào ListView này (nguồn dữ liệu của nó được chứa trong trạng thái thành phần).

Cách thực hiện thao tác như vậy, thực hành tốt là gì? Tôi sẽ sử dụng một đại biểu trong ứng dụng thuần túy nhưng ở đây, cả hai khung nhìn được xử lý bởi cá thể NavigatorIOS.

index.ios.js

addTask() { 
    console.log("Test"); 
}, 

render() { 
     return (
      <React.NavigatorIOS 
       ref="nav" 
       style={styles.container} 
       tintColor="#ED6063" 
       initialRoute={{ 
        title: "Tasks", 
        component: TasksList, 
        rightButtonTitle: 'Add', 
        onRightButtonPress:() => { 
         this.refs.nav.navigator.push({ 
          title: "New task", 
          component: NewTask, 
          passProps: { 
           onTaskAdded: this.addTask 
          }, 
          leftButtonTitle: "Cancel" 
         }); 
        } 
       }}/> 
     ); 
    } 

NewTask.js

taskAdded() { 
console.log("Added: " + this.state.title + " - " + this.state.description); 
this.props.onTaskAdded({ 
    title: this.state.title, 
    description: this.state.description 
}); 
this.props.navigator.pop(); 
} 

TasksList.js

var dataSource = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2 
}); 
this.state = { 
    dataSource: dataSource.cloneWithRows(data) 
}; 

Bạn có thể tìm complete source code here.

Trả lời

0

Bạn nên viết lại hàm constructor để lấy dữ liệu theo cách động. Sau đó, khi trang tải lại, nó sẽ nhận được dữ liệu chính xác bao gồm tác vụ mới. Ở đây bạn nhận được dữ liệu từ một mảng tĩnh, mà sẽ không thay đổi.

Lưu danh sách tác vụ vào tệp cục bộ hoặc Firebase và đọc khi xây dựng.

+0

Vì vậy, bạn đề xuất sử dụng một số loại biến toàn cục/khu vực lớn để chuyển dữ liệu giữa các chế độ xem? Nghe có vẻ như kiến ​​trúc rất xấu ... – Blackus

+0

@Blackus Nếu không, làm thế nào để bạn có được danh sách nhiệm vụ? "Toàn cầu" là tùy chọn. – KChen

+0

Đó chính là điểm ở đây. Trong khi phát triển bản địa, chúng ta có thể sử dụng giao thức hoặc truyền các khối mã để thực thi (như gọi lại). Vì vậy, danh sách nhiệm vụ chỉ được "chia sẻ" với hai chế độ xem này, nó không nằm trên một địa điểm chung với những thứ khác. – Blackus

15

Tài liệu phản ứng gốc có phần tóm tắt về cách tiếp cận với communicating between components.

Khi bạn đang cố gắng làm điều gì đó phức tạp hơn một phụ huynh> đứa trẻ hoặc từ trẻ> mối quan hệ cha mẹ, có một vài lựa chọn:

  1. quản lý mô hình. Đối với anh chị em thật sự < -> thông tin liên lạc anh chị em (nghĩa là nơi hai anh chị em chia sẻ một phụ huynh thông qua sáng tác), bạn có thể để cha mẹ quản lý tiểu bang. Ví dụ: bạn có thể có tiện ích <MyConsole> có một số <TextInput> và một số <ListView> chứa người dùng trước đây, cả hai đều là con của tiện ích <Console>.

    • Ở đây, <Console> có thể hoạt động với tư cách người quản lý. Khi <TextInput> thay đổi giá trị của nó, bạn có thể sử dụng sự kiện onChangeText để chuyển giá trị mới đến thành phần gốc <MyConsole>, sau đó cập nhật trạng thái của nó và chuyển nó lên con của nó.
  2. Mẫu sự kiện (xuất bản-đăng ký). Hãy nhớ rằng các thành phần chỉ là các đối tượng, và vì vậy bạn có thể sử dụng các phương pháp hướng đối tượng để giao tiếp giữa các thành phần. Các tài liệu React lưu ý rằng:

    Để liên lạc giữa hai thành phần không có mối quan hệ cha-con, bạn có thể thiết lập hệ thống sự kiện toàn cầu của riêng bạn.Theo dõi các sự kiện trong componentDidMount(), hủy đăng ký trong componentWillUnmount() và gọi setState() khi bạn nhận được một sự kiện.

    • Ở đây, bạn có thể sử dụng một đơn giản publish-đăng ký thư viện như pubsub.js để khi một thành phần thay đổi nó chỉ xuất bản thay đổi và các thành phần khác có liên quan có thể nghe cho sự kiện này và cập nhật bản thân. Đây có thể là một cách tiếp cận rất hiệu quả cho các ứng dụng nhỏ hơn.
  3. Mẫu thông số. Một trong những hạn chế với một hệ thống xuất bản/đăng ký thuần túy là, nó trở nên khó khăn để theo dõi trạng thái. Ví dụ, nếu bạn có 2 thành phần (ví dụ EditTitle, EditBody) có thể cập nhật một số trạng thái giống như một thông báo email, thì hệ thống eventing thuần túy sẽ chuyển qua các phiên bản khác nhau của trạng thái xung quanh. phiên bản của sự thật ". Đây là nơi React's flux approach xuất hiện. Với thông lượng, các thành phần cập nhật kho dữ liệu chịu trách nhiệm cập nhật và điều chỉnh dữ liệu (ví dụ: EmailDataStore) và sau đó cửa hàng thông báo cho các thành phần của trạng thái được cập nhật.

    • Vì vậy, trong ví dụ của bạn, quan điểm công việc sẽ phát hành một bản cập nhật (ví dụ qua công bố, hoặc chức năng trực tiếp gọi) vào một TasksDataStore, mà sau đó có thể xuất bản một sự kiện như tasks-updated cho thuê bao của mình. Cả bảng điều khiển nhiệm vụ và bảng điều khiển kết quả sẽ đăng ký với kho dữ liệu.

Khi thiết lập đăng ký, nó là tốt nhất để thêm các đăng ký sau khi gắn kết thành phần và chắc chắn loại bỏ chúng trước khi unmounts thành phần (nếu bạn kết thúc với rất nhiều thuê bao mồ côi).

+0

tks @tohster, bạn nói đúng, thiết lập một hệ thống sự kiện toàn cầu là cách tốt nhất, nhưng tôi mới để phản ứng bản địa, tôi không biết làm thế nào để tạo ra một hệ thống sự kiện toàn cầu trong phản ứng bản địa. – backslash112

Các vấn đề liên quan