导航抽屉不会在react-native中呈现

时间:2021-07-23 18:58:56

Hey guys i am new to react-native and trying to build navigation drawer with hamburger icon on navigation bar. I can see the navigation bar but failed to render hamburger icon . Also the code is not getting rendered when i try to integrate it with other screen Here is my code for toolbar.js

嘿伙计们我是新手反应原生并试图在导航栏上构建带汉堡包图标的导航抽屉。我可以看到导航栏但无法呈现汉堡包图标。当我尝试将其与其他屏幕集成时,代码也没有呈现。这是我的toolbar.js代码

class toolbar extends Component {
  render(){
    var navigator = this.props.navigator;
    return (
    <ToolbarAndroid
     title={this.props.title}
     navIcon={require('./img/menu.png')}
     style = {styles.toolbar}
     titleColor={'white'}
     onIconClicked={this.props.sidebarRef}/>
    );
  }
}

And OpenDrawerFromToolbar.js code

和OpenDrawerFromToolbar.js代码

var navigationView = (
    <ScrollView>
      <View style={{flex: 1, backgroundColor: '#fff'}}>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I m in the Drawer!</Text>
      </View>

    </ScrollView>
);

return (
  <DrawerLayoutAndroid
    drawerWidth={windowsWidth/1.5}
    drawerPosition={DrawerLayoutAndroid.positions.Left}
    renderNavigationView={() => navigationView}
    ref={'DRAWER'}>
    <Toolbar style={styles.toolbar}
        title={'Calendar'}
        navigator={this.props.navigator}
        sidebarRef={()=>this._setDrawer()}/>
    <View style={{alignItems: 'center', backgroundColor: 'blue'}}>
      <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hi MiaMia</Text>
    </View>
  </DrawerLayoutAndroid>
);
}

 _setDrawer() {
   this.refs['DRAWER'].openDrawer();
  }
 }

when running OpenDrawerFromToolbar.js solely it runs without rendering the hamburger icon. when i try to integrate with some other views it fails to get rendered. can anybody guide me through this? 导航抽屉不会在react-native中呈现 导航抽屉不会在react-native中呈现

当运行OpenDrawerFromToolbar.js时,它只运行而不渲染汉堡包图标。当我尝试与其他一些视图集成时,它无法呈现。任何人都可以指导我这个吗?

Thanks alot in advance. Any queries or doubts are welcome.

非常感谢提前。欢迎任何疑问或疑问。

1 个解决方案

#1


0  

Can you send me your project file structure snapshot with your image/icons folder.. ...

你能用图像/图标文件夹把你的项目文件结构快照发给我......

I don't think you can implement toolbar style like this :

我认为你不能像这样实现工具栏样式:

<Toolbar style={styles.toolbar} //here is the error 
 title={'Calendar'} 
 navigator={this.props.navigator} 
 sidebarRef={()=>this._setDrawer()}/>

And send me your toolbar style stylesheet too..

并将您的工具栏样式样式表发送给我..

Its better to implement toolbar style in toolbar.js file .. but still let me have a look at your style first ..

它更好地在toolbar.js文件中实现工具栏样式..但仍然让我先看看你的风格..

#1


0  

Can you send me your project file structure snapshot with your image/icons folder.. ...

你能用图像/图标文件夹把你的项目文件结构快照发给我......

I don't think you can implement toolbar style like this :

我认为你不能像这样实现工具栏样式:

<Toolbar style={styles.toolbar} //here is the error 
 title={'Calendar'} 
 navigator={this.props.navigator} 
 sidebarRef={()=>this._setDrawer()}/>

And send me your toolbar style stylesheet too..

并将您的工具栏样式样式表发送给我..

Its better to implement toolbar style in toolbar.js file .. but still let me have a look at your style first ..

它更好地在toolbar.js文件中实现工具栏样式..但仍然让我先看看你的风格..