Question

我想设置一个带有Drawer（Native Base）的侧边栏菜单。

我有一个App.js：

export default class ReactProject extends Component {

 renderScene (route, navigator) {
  return <route.component navigator={navigator} />
}

render() {
  return (
  <Navigator
  style={styles.container}
  renderScene={this.renderScene.bind(this)}
  initialRoute={{component: Home}}  
  />
  );
}
}

带抽屉的Home.js：

export default class Home extends Component {

    render() {   
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<SideBar />} navigator={this.props.navigator}>
        <Container>
        </Container>
      </Drawer>
    );
}
}

装入抽屉的sidebar.js：

export default class SideBar extends Component {

constructor(props) {
    super(props);
}

redirect(routeName){
    this.props.navigator.push({
      component: routeName
    });
  }

  render() {
    return (
      <Content style={styles.sidebar}>
          <ListItem button >
            <Text>Home</Text>
          </ListItem>
          <ListItem button >
            <Text>Test</Text>
          </ListItem>
           <ListItem button onPress={this.redirect.bind('Blank')}>
            <Text>Blank Page</Text>
          </ListItem>
      </Content>
    );
  }
}

但是当我点击时我有这个错误：

未定义不是对象（评估＆＃39; this.props.navigator.push＆＃39;）

当按钮在页面中但仅在sidebar.js

中时，我没有这个问题

有人可以帮助我吗？

谢谢你，托马斯。

Answer 1

我认为你必须改变你的Home.js的一点代码，如下所述：

render() {   
return (
  <Drawer
    ref={(ref) => { this._drawer = ref; }}
    content={<SideBar navigator={this.props.navigator} />}
    <Container>
    </Container>
  </Drawer>
);

在sidebar.js文件中添加以下代码：

  static propTypes = {
      navigator: React.PropTypes.object,
   }

React Native和Drawer：undefined不是对象导航器

1 个答案: