Question

我正在处理我的应用程序中的本机nativebase抽屉组件，所以我按照以下所有步骤进行操作

的package.json

"dependencies": {
"@expo/vector-icons": "^6.2.2",
"native-base": "^2.3.7",
"react": "16.0.0",
"react-native": "0.51.0",
"react-native-device-info": "^0.13.0",
"react-native-router-flux": "^4.0.0-beta.28",
"react-navigation": "^1.0.0-beta.27"
},

Menuscreen.js

render(){

return(

  <Drawer
      ref={(comp) => {this.drawer = comp}}
      content={this.drawerContent()}
      type={'overlay'}
      panThreshold={0.30}
      panOpenMask={this.state.panOpenMask}
      onClose={() => this.closeDrawer()}
      >
      {this.setView(this.state.viewID)}

  </Drawer>
)
}

setView方法

setView(id) {
console.log("setView id;"+ id);
BackHandler.removeEventListener('hardwareBackPress', this._handleBackPressInDrawer);
switch (id){

  case 0:
    return(
      <HomeScreen drawer={this.drawer}/>
    )

  case 1:
    return(
      <ScreenOne drawer={this.drawer}/>
    )
  case 2:
    return(
      <ScreenTwo drawer={this.drawer}/>
    )
    case 3:
    return(
      <ScreenThree drawer={this.drawer}/>
    )
    case 4:
    return(
      <ScreenContacts drawer={this.drawer}/>
    )
  case 5:
    return(
      <ScreenNotes />
    )
    case 6:
    return(
      <FourScreen drawer={this.drawer}/>
    )
     break;
  default:

}
}

Homescreen.js

render() {

return (
  <Container>
    <Header style={{ alignItems:'center',paddingTop: 0, paddingBottom: 0 }}>
      <Left>
        <Button transparent onPress={()=>{this.props.drawer._root.open()}}>
          <Icon name='menu' />
        </Button>
      </Left>
      <Body style={{alignItems:'flex-start'}} >
        <Title>HOME</Title>
      </Body>
    </Header>

  </Container>

)
}

当我运行上面的代码并单击主屏幕上的菜单图标时，我在homescreen.js中收到错误消息

未定义不是对象（评估_this2.propsdrawer.root）

我知道如何解决这个问题？你的所有建议都很明显

Answer 1

render() {
var that = this;
return (
  <Container>
    <Header style={{ alignItems:'center',paddingTop: 0, paddingBottom: 0 }}>
      <Left>
        <Button transparent onPress={()=>{that.props.drawer._root.open()}}>
          <Icon name='menu' />
        </Button>
      </Left>
      <Body style={{alignItems:'flex-start'}} >
        <Title>HOME</Title>
      </Body>
    </Header>

  </Container>

)
}

如果您没有工作，请尝试使用this.props.navigation.navigate（＆＃34; DrawerOpen＆＃34;），如果您已实施反应导航。

Answer 2

我通过以下方式解决了我的问题

global.drawer =  null;

**SetView function**

setView(id) {
console.log(TAG + "setView id;"+ id);

switch (id){

  case 0:       
    return(
      <HomeScreen />          
    )

  case 1:
    return(
      <ScreenOne />
    )
  case 2:
    return(
      <ScreenTwo/>
    )
    case 3:
    return(
      <ScreenThree />
    )
    case 4:
    return(
      <ScreenContacts />
    )
  case 5:
    return(
      <ScreenNotes />
    )
    case 6:
    return(
      <FourScreen />
    )

  default:
  this.logout();

    }
  }


render(){

return(

  <Drawer

      ref={(ref) => { global.drawer = ref; }}
      content={this.drawerContent() }
      type={'overlay'}
      panThreshold={0.30}
      panOpenMask={this.state.panOpenMask}
      onClose={() => MenuScreen.closeDrawer()}
      >
      {this.setView(this.state.viewID)}
  </Drawer>
  )
 }

static closeDrawer = () => {
//this.drawer._root.close()
console.log(TAG + "-----closeDrawer------")
if(global.drawer != null){
  global.drawer._root.close()}
 };

static openDrawer = () => {
console.log(TAG + "-----openDrawer------")
//this.drawer._root.open()
if(global.drawer != null)
global.drawer._root.open()
};

在Homescreen.js

componentWillMount() {
   MenuScreen.closeDrawer()
 }

render() {
var that = this;
return (
  <Container>
    <Header style={Styles.header}>
      <Left style={Styles.headerLeftIcon}>
        <Button transparent onPress={()=>MenuScreen.openDrawer()}>
          <Icon name='menu' style={{color:'white'}} />
        </Button>
      </Left>
      <Body style={{flex:1,alignItems:'flex-start'}} >
        <Title style={Styles.headerTitle}>HOME</Title>
      </Body>
    </Header>
   </Container>

    )
 }

React Native - 我的项目中未打开Nativebase抽屉

2 个答案: