快乐江米在线编程平台制作记录4——菜单栏修改之换个logo

作品分类:SCRATCH3 2019-11-10

1、修改文件位置:

src/components/menu-bar/menu-bar.jsx

2、添加一个属性:

mylogourl  //用来存放logo的url地址。

添加位置如下:

MenuBar.propTypes = {
    //////////////下面开始自定义了》》》》
    //菜单栏上的第一个图标
    mylogourl: PropTypes.string  
};



3、修改图标位置的代码。

找到如下代码

 
<img
    alt="Scratch"
    className={classNames(styles.scratchLogo, {
        [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
    })}
    draggable={false}
    src={scratchLogo}
    onClick={this.props.onClickLogo}
/>

把这一句改成:


src={this.props.mylogourl ? this.props.mylogourl : scratchLogo}                             

意思是查看属性mylogourl是否为空,如果不是空就是有内容,那么就用mylogourl中的图片地址,如果为空,就用原始的图片地址scratchLogo。


4、给mylogourl赋值,让图标变成自定义的。

先找一个百度的图标:

https://www.baidu.com/img/baidu_resultlogo@2.png

然后找到文件:

src/components/gui/gui.jsx

打开找到“菜单栏”如下代码:


<MenuBar
            accountNavOpen={accountNavOpen}
            authorId={authorId}
            authorThumbnailUrl={authorThumbnailUrl}
            authorUsername={authorUsername}
            canCreateCopy={canCreateCopy}
            canCreateNew={canCreateNew}
            canEditTitle={canEditTitle}
            canRemix={canRemix}
            canSave={canSave}
            canShare={canShare}
            className={styles.menuBarPosition}
            enableCommunity={enableCommunity}
            isShared={isShared}
            renderLogin={renderLogin}
            showComingSoon={showComingSoon}
            onClickAccountNav={onClickAccountNav}
            onClickLogo={onClickLogo}
            onCloseAccountNav={onCloseAccountNav}
            onLogOut={onLogOut}
            onOpenRegistration={onOpenRegistration}
            onSeeCommunity={onSeeCommunity}
            onShare={onShare}
            onToggleLoginOpen={onToggleLoginOpen}
            onUpdateProjectTitle={onUpdateProjectTitle}
           mylogourl"https://www.baidu.com/img/baidu_resultlogo@2.png"
        />

添加上面的一句。

运行测试:

屏幕快照 2019-11-10 下午5.43.30.png


图标换成了自定义的图标。
























二维码
意见反馈