Thao tác định tuyến NavigatorIOS trên một thành phần

Question

Tôi đang cố gắng xây dựng một ứng dụng Todo rất đơn giản trong React Native. Nó bao gồm hai khung nhìn: một với một danh sách các nhiệm vụ, một với một lĩnh vực đầu vào (để thêm một cái mới). Điều hướng được đảm bảo bằng một số NavigatorIOS và các nút trên đó (có thể là UIBarButtonItem với UIKit).

Trên giao diện danh sách, có một Thêm nút bên phải trên Navigator, trên quan điểm với lĩnh vực văn bản, có nút quay lại ở bên trái và một Xong một ở bên phải. Khi nhấp vào xong, nó sẽ thêm một nhiệm vụ mới với nội dung của trường văn bản.

Sự cố là, nút và hành động của chúng được xác định khi tạo thành phần NavigatorIOS và tôi không tìm cách đính kèm phương thức được xác định trong thành phần khác dưới dạng thao tác nút.

Như một ví dụ, đây là NavigatorIOS

class TodoList extends Component { 

    render() { 
     return (
      <NavigatorIOS 
       ref="nav" 
       style={styles.navbar} 
       initialRoute={{ 
        component: ItemList, 
        title: 'Todo list', 
        rightButtonTitle: 'Add', 
        onRightButtonPress:() => { 
         this.refs.nav.push({ 
          title: 'Add a new task', 
          component: AddTodo, 
          rightButtonTitle: 'Done', 
          onRightButtonPress:() => { 
           console.log('done !'); 
          } 
         }); 
        } 
       }} 
      /> 
     ); 
    } 
} 

của tôi, tôi không đặt ở đây hai của tôi thành phần khác ItemList và AddTodo như không có gì thú vị về nó được.

Điều tôi cần là một cách để làm cho các thành phần giao tiếp (như trong mẫu ủy quyền) với thành phần điều hướng.

Có lẽ điều đó là không thể, hoặc tôi hoàn toàn sai lầm về mô hình được sử dụng với React Native, vì vậy hãy bình luận nếu có điều gì đó không rõ ràng về câu hỏi của tôi.

Sửa 05/26

Trên thực tế, Facebook đội nhận thức được rằng một cái gì đó là mất tích để xử lý trường hợp sử dụng với NavigatorIOS thành phần.

Từ Eric Vicenti (đăng vào ngày 3 tháng 2 năm 2015) trên an issue on GitHub chính xác bao gồm câu hỏi của tôi.

Hiện nay cách tốt nhất để làm điều đó là để tạo ra một EventEmitter trong chủ sở hữu của NavigatorIOS, sau đó bạn có thể vượt qua nó xuống để trẻ em sử dụng route.passProps. Đứa trẻ có thể kết hợp trong Subscribable.Mixin và sau đó trong componentDidMount, bạn có thể

this.addListenerOn(this.props.events, 'myRightBtnEvent', this._handleRightBtnPress); 

Rõ ràng là API này cần cải thiện. Chúng tôi đang tích cực làm việc API định tuyến trong Relay và hy vọng phản ứng-bộ định tuyến, nhưng chúng tôi muốn NavigatorIOS có thể sử dụng độc lập. Có lẽ chúng ta nên thêm một emitter kiện bên trong đối tượng navigator, vì vậy các thành phần trẻ có thể đăng ký hoạt động hàng hải khác nhau:

this.addListenerOn(this.props.navigator.events, 'rightButtonPress', this._handleRightBtnPress); 

Answer 1

A. Trong thành phần ban đầu

this.props.navigator.push({ 
    title: 'title', 
    component: MyComponent, 
    rightButtonTitle: 'rightButton', 
    passProps: { 
     ref: (component) => {this.pushedComponent = component}, 
    }, 
    onRightButtonPress:() => { 
     // call func 
     this.pushedComponent && this.pushedComponent.myFunc(); 
    }, 
}); 

B. Trong đẩy thành phần
thay thế onRightButtonPress func trong thành phần được đẩy.

componentDidMount: function() { 
    // get current route 
    var route = this.props.navigator.navigationContext.currentRoute; 
    // update onRightButtonPress func 
    route.onRightButtonPress = () => { 
     // call func in pushed component 
     this.myFunc(); 
    }; 
    // component will not rerender 
    this.props.navigator.replace(route); 
},