react-native - react-native：抽屉未打开

Question

我是 react-native 的新手，我正在尝试将抽屉添加到我的应用程序中。我正在与您分享我的代码。

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>