导航抽屉没有在react-native中呈现

时间:2016-07-06 06:39:48

标签: javascript android react-native navbar hamburger-menu

嘿伙计们,我是新来的反应原生并试图在导航栏上构建带有汉堡包图标的导航抽屉。我可以看到导航栏但无法呈现汉堡包图标。当我尝试将其与其他屏幕集成时,代码也不会被渲染 这是我的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}/>
    );
  }
}

和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();
  }
 }

单独运行OpenDrawerFromToolbar.js时,无需渲染汉堡图标即可运行。当我尝试与其他一些视图集成时,它无法呈现。任何人都可以指导我这个吗? icons not displaying another example where i am just getting icon title

提前多多谢谢。欢迎任何疑问或怀疑。

1 个答案:

答案 0 :(得分:0)

您可以使用图像/图标文件夹向我发送项目文件结构快照.. ...

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

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

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

最好在toolbar.js文件中实现工具栏样式..但是让我先看看你的风格..