Phản ứng gốc: Làm cách nào để chuyển đạo cụ tới 'routeMapper' của 'Navigator.NavigationBar'?

Question

Tôi gặp sự cố khi sử dụng React Native 0.16 (Android). Câu hỏi là cách chuyển đạo cụ đến routeMapper của Navigator.NavigationBar, thuộc về thành phần <Navigator />.

cấu trúc mã của tôi như dưới đây

class MyApp extends Component {  
    ... 

    static NavigationBarRouteMapper = { 
     LeftButton(route, navigator, index, navState) { 
      // ### I want to call 'functionABC' here. What Should I do? 
     }, 
     RightButton(route, navigator, index, navState) { 
      // ### I want to call 'functionABC' here. What Should I do? 
     },    
     Title(route, navigator, index, navState) { 
      // ### I want to call 'functionABC' here. What Should I do? 
     },   
    }  

    ... 

    functionABC() { 
     ... 
    }  

    ... 

    render() { 
     return (
      <View> 
       <Navigator 
       initialRoute={{ 
       name: 'Main', 
       index: 0, 
       }} 
       renderScene={this.renderScene.bind(this)} 
       sceneStyle={{marginTop:50}} 
       navigationBar={ 
        <Navigator.NavigationBar 
        routeMapper={MyApp.NavigationBarRouteMapper} 
        /> 
       } 
       ref="nav" /> 
      </View> 
     ); 
} 

Answer 1

Bạn có thể tạo ra các đối tượng mapper mỗi khi sử dụng một chức năng, trong mã của bạn này chỉ có thể là:

class MyApp extends Component {  
    ... 

    static NavigationBarRouteMapper = props => ({ 
     LeftButton(route, navigator, index, navState) { 
     }, 
     RightButton(route, navigator, index, navState) { 
     },    
     Title(route, navigator, index, navState) { 
     },   
    })  

    render() { 
     return (
      <View> 
       <Navigator 
       initialRoute={{ 
       name: 'Main', 
       index: 0, 
       }} 
       renderScene={this.renderScene.bind(this)} 
       sceneStyle={{marginTop:50}} 
       navigationBar={ 
        <Navigator.NavigationBar 
        routeMapper={MyApp.NavigationBarRouteMapper(this.props)} 
        /> 
       } 
       ref="nav" /> 
      </View> 
     ); 
}