Question

我正在尝试使用反应原生的DrawerLayoutAndroid和ToolbarAndroid制作一个AndroidDrawer。单击工具栏上的汉堡图标时，抽屉应该打开。

<DrawerLayoutAndroid ref={(element) => {
      this.drawer=element;
    }}
          drawerWidth={300}
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => navigationView}>
          <Toolbar toolbarText="XYZ" drawer={this.drawer}/>
</DrawerLayoutAndroid>

//导出为工具栏的另一个文件

<ToolbarAndroid
  navIcon={DrawerIcon}
  onIconClicked={() => {

    this.props.drawer.openDrawer();

  }}
    title={this.props.toolbarText}
    style={[styles.toolbar,{backgroundColor:col}]}
    />

但是当我按下工具栏上的图标时，它表示 undefined不是“_this2.props.drawer.openDrawer”的函数。

或者当我将方法设为

时

openMydrawer(){
this.drawer.openDrawer();

}

然后将其作为道具传递给工具栏drawer=this.openMyDrawer.bind(this)，然后从工具栏中将其作为this.props.openMyDrawer调用它就可以了......

有人可以解释为什么当我直接传递对工具栏的引用时会传递undefined，因为对象作为引用而不是按值传递，只要this.drawer得到一个值，该值应该反映给它的子节点或兄弟节点就此而言。

Answer 1

布局函数不会导致重新渲染，因此当您渲染Toolbar时，this.drawer未定义，因为此时未调用布局函数。你的另一种方法有效，因为this.drawer在函数运行时被按下（按下按钮），而不是在组件渲染时进行评估。

要将ref作为道具传递，您必须触发另一个渲染，理想情况是将ref置于状态。像这样：

render() {
    <DrawerLayoutAndroid 
            ref={(element) => this.setState({drawer:element})}
            drawerWidth={300}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
            <Toolbar toolbarText="XYZ" drawer={this.state.drawer}/>
    </DrawerLayoutAndroid>
}

您应该考虑在Toolbar的首次渲染中未定义抽屉引用。

在React-Native

1 个答案: