Question

我是本机反应的新手，我正在尝试将抽屉添加到我的应用程序中。我正在与您共享代码。

export default class Dashboard extends React.Component {
constructor(props){
  super(props);
  this.state = {

   }
}
closeControlPanel = () => {
this._drawer.close()
};
 openControlPanel = () => {
 this._drawer.open()
 };
const drawerStyles = {
   drawer: { shadowColor: '#000000', shadowOpacity: 0.8,backgroundColor:'' shadowRadius: 3},
   main: {paddingLeft: 3},
}
render(){
 let drawerContent = [];
drawerContent.push(
     <View style={{ backgroundColor:'red', textAlign:'center' }}>
        <Text style={{ color:'#ffffff', fontSize:17, alignSelf:'center' }}>Hiiiiiiiiiii</Text>
     </View>
  );
<Drawer
      type="overlay"
      tapToClose={true}
      content = {drawerContent}
      openDrawerOffset={0.2} // 20% gap on the right side of drawer
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      styles={drawerStyles}
      tweenHandler={(ratio) => ({
        main: { opacity:(2-ratio)/2 }
      })}
    >
    </Drawer>
}
}

谁能告诉我抽屉的内容应该在哪里以及如何编写打开和关闭抽屉的功能。谢谢...

Answer 1

您尚未在Drawer上赋予ref属性

尝试添加。

<Drawer
      ref={c => this._drawer = c} // <==== Add this line
      type="overlay"
      tapToClose={true}
      content = {drawerContent}
      openDrawerOffset={0.2} // 20% gap on the right side of drawer
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      styles={drawerStyles}
      tweenHandler={(ratio) => ({
        main: { opacity:(2-ratio)/2 }
      })}
    >
    </Drawer>

反应本机：抽屉未打开

1 个答案: