React Native：如何将道具传递给'Navigator.NavigationBar'的'routeMapper'？

Question

我在使用 React Native 0.16 (Android) 时遇到了麻烦。 问题是如何将props传递给属于<Navigator />组件的Navigator.NavigationBar的routeMapper。

我的代码结构如下

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

您可以在每次使用函数时生成映射器对象，在您的代码中这可能只是：

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>
        );
}