Làm cách nào để chuyển tham chiếu đến Bộ điều hướng vào renderScene?

Question

Tôi đã thử nghiệm với React Native và tôi gặp sự cố khi chuyển một tham chiếu đến điều hướng đến hiện trường tôi đang hiển thị. Không có điều hướng, các mục trong NewsList không thể kích hoạt thay đổi cảnh.

render: function() { 
    return (
     <Navigator 
      initialRoute={ { name: 'NewsList', index: 0 } } 
      renderScene={ (route, navigator) => NewsList } 
     />              
    );               
}, 

Tương tự, trong hàm cảnh hiển thị, tôi cần phải chuyển hướng đến chức năng hiển thị hàng.

<UIExplorerPage noSpacer={true} noScroll={true}> 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     onEndReached={this.onEndReached} 
    /> 
</UIExplorerPage> 

Cách thành ngữ để truyền tham chiếu như thế này là gì?

Answer 1

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, bạn đang nói rằng các thành phần mục danh sách tin tức của bạn cần một tham chiếu đến hoa tiêu để kích hoạt một sự kiện hàng hải. Điều này (IMO) là cách tiếp cận sai lầm.

Thay vào đó, vượt qua các mục danh sách một callback. Gọi lại là một phương thức trên thành phần danh sách tin tức gốc và đã có tham chiếu đến trình điều hướng mà bạn có thể gọi. Bằng cách này, bạn có thể tránh bỏ qua tất cả các điều hướng trong hệ thống phân cấp thành phần của bạn.

tôi có thể cung cấp cho một mã ví dụ nếu điều này là không rõ ràng :)

Answer 2

Giống như Colin đề cập, bạn cần phải vượt qua một callback để ghi danh sách của bạn. Đưa ra dưới đây là mã từ một dự án ví dụ (UIExplorer) trong chính bản thân phản ứng.

Ở đây, chúng tôi đang đi qua các đối tượng navigator đến NavMenu mà là thành phần danh sách.

var TabBarExample = React.createClass({ 
    // Other methods... blah blah 
    renderScene: function(route, nav) { 
     switch (route.id) { 
      case 'navbar': 
      return <NavigationBarSample navigator={nav} />; 
      case 'breadcrumbs': 
      return <BreadcrumbNavSample navigator={nav} />; 
      case 'jumping': 
      return <JumpingNavSample navigator={nav} />; 
      default: 
      return (
       <NavMenu 
       message={route.message} 
       navigator={nav} 
       onExampleExit={this.props.onExampleExit} 
       /> 
      ); 
     } 
    }, 

    render: function() { 
     return (
      <Navigator 
      style={styles.container} 
      initialRoute={{ message: "First Scene", }} 
      renderScene={this.renderScene} 
      configureScene={(route) => { 
       if (route.sceneConfig) { 
       return route.sceneConfig; 
       } 
       return Navigator.SceneConfigs.FloatFromBottom; 
      }} 
      /> 
     ); 
     } 
}); 

Trong thành phần NavMenu, chúng tôi đang đi qua một callback trên onPress của mỗi NavButton.

class NavMenu extends React.Component { 
    render() { 
    return (
     <ScrollView style={styles.scene}> 
     <Text style={styles.messageText}>{this.props.message}</Text> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe right to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromRight, 
      }); 
      }} 
      text="Float in from right" 
     /> 
     <NavButton 
      onPress={() => { 
      this.props.navigator.push({ 
       message: 'Swipe down to dismiss', 
       sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
      }); 
      }} 
      text="Float in from bottom" 
     /> 
     // Omitted rest of the NavButtons. 
     </ScrollView> 
    ); 
} 

Dưới đây là một ví dụ link.

Answer 3

Câu hỏi được diễn đạt một cách mơ hồ. Tôi đã giải quyết vấn đề của mình bằng cách thêm trình điều hướng vào UIExplorerPage, ví dụ: <UIExplorerPage navigator={navigator} />. Các thuộc tính có thể được truy cập trong UIExplorerPage sử dụng this.props.