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

【问题标题】：React Native -- Nativebase drawer not open in my projectReact Native - 我的项目中未打开 Nativebase 抽屉
【发布时间】：2018-01-30 06:26:21
【问题描述】：

我正在我的应用程序中处理原生 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）

知道如何解决这个问题吗？你的所有建议都很有价值

【问题讨论】：

我认为您需要在constructor 中绑定您的方法，例如this.setView = this.setView.bind(this);
@RiddhiParekh：我尝试了您的建议，但仍然收到相同的错误消息
你在哪个文件中绑定了？
@RiddhiParekh: MenuScreen.js
其实我也遇到了这个错误，但是方法绑定解决了我的问题。

标签： javascript android react-native drawer

【解决方案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("DrawerOpen")，如果您实现了 react-navigation。

【讨论】：

【解决方案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>

    )
 }

【讨论】：