javascript - NavigationBar 的 routeMapper 不是函数

Question

我有一个非常简单的导航栏，我正在尝试连接。我想要做的就是在我的页面顶部显示一个导航栏(稍后我会担心导航到其他页面)。但是，当我在 Navigator 上添加 navigationBar Prop 时，出现错误“this.props.routeMapper[componentName] is not a function”。如果我注释掉 navigationBar 并且不使用它，我的代码运行时不会出错。

由于 routeMapper 应该是一个对象，我不确定为什么会出现该错误。我的代码贴在下面。我正在使用 React Native v21。有什么想法吗？

var routeMapper = {
  title: function() {
    return (
      <View><Text>Title</Text></View>
    );
  }    
};

class TryNavigator extends Component {
  renderScene(route, nav) {
    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }

  render() {
    return (
      <Navigator
        initialRoute={{id: 0, title: 'My Page'}}
        renderScene={this.renderScene}
        navigationBar={
          <Navigator.NavigationBar
            routeMapper={routeMapper}
          />
        }
      />
    );
  }
}

Answer 1

NavigationBarRouteMapper 采用三个函数参数:

LeftButton(route, navigator, index, navState) { 
  // some component or null 
}
RightButton(route, navigator, index, navState) { 
  // some component or null 
}
Title(route, navigator, index, navState) { 
  // some component or null 
}

尝试这样的事情:

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    if(index > 0) {
      return (
        <TouchableHighlight
          underlayColor="transparent"
          onPress={() => { if (index > 0) { navigator.pop() } }}>
          <Text style={ styles.leftNavButtonText }>Back</Text>
        </TouchableHighlight>)
    } 
    else { return null }
  },
  RightButton(route, navigator, index, navState) {
    if (route.onPress) return (
      <TouchableHighlight
         onPress={ () => route.onPress() }>
         <Text style={ styles.rightNavButtonText }>
              { route.rightText || 'Right Button' }
         </Text>
       </TouchableHighlight>)
  },
  Title(route, navigator, index, navState) {
    return <Text style={ styles.title }>MY APP TITLE</Text>
  }
};

我设置了一个演示 here不久前 routeMapper 正在工作。