React Native-Nativebase抽屜未在我的項目中打開

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（“ DrawerOpen”）。

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 個解決方案

解決方案1
0 2018-01-30 08:39:24

解決方案2
0 2018-01-31 13:28:49

React Native-Nativebase抽屜未在我的項目中打開

問題描述

2 個解決方案

解決方案1 0 2018-01-30 08:39:24

解決方案2 0 2018-01-31 13:28:49

解決方案1
0 2018-01-30 08:39:24

解決方案2
0 2018-01-31 13:28:49