Question

我有一个非常简单的导航栏，我正在尝试连线。我想要做的就是有一个导航栏显示在我的页面顶部（我会担心以后导航到其他页面）。但是，当我在导航器上添加navigationBar prop时，我得到错误“this.props.routeMapper [componentName]不是函数”。如果我注释掉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，并且路由工具正在运行。

NavigationBar的routeMapper不是一个函数

1 个答案: