2016-07-06 101 views
0

嘿家伙我是新的反应原生和尝试建立与导航栏上的汉堡包图标导航抽屉。我可以看到导航栏,但未能呈现汉堡包图标。同样的代码是没有得到渲染当我尝试将其与其他屏幕 集成这里是我的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单独运行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(); 
    } 
} 

代码它运行时不会显示汉堡包图标。当我尝试与其他视图集成时,它无法呈现。任何人都可以通过这个指导我吗? icons not displaying another example where i am just getting icon title

非常感谢。任何疑问或疑问都是受欢迎的。

回答

0

你能不能给我你的项目文件结构与快照图像/图标文件夹......

我不认为你可以实现工具栏的风格是这样的:

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

和发送我您的工具栏风格样式太..

其更好地实现toolbar.js文件工具栏的风格..但还是让我看看你的风格..第一

+0

哎riten我已编辑我的问题你可以看看它。顺便说一下,你可以指导我在哪里存储图标,因为我面临的问题是没有图标在工具栏中得到渲染 – atif

+0

文件夹结构是像:icons> color> menu.png所以尝试像这样的格式一次:navIcon = {require(' ../icons/color/menu.png')} ..在你的情况下 – Riten

+0

欲了解更多信息[点击此处](https://facebook.github.io/react-native/docs/image.html) – Riten