天道酬勤,学无止境

在场景中使用自定义图标时如何打开抽屉(How to open Drawer When use a custom icon in Scene)

问题

我使用 Drawer 我的应用程序,我的问题是我想在 Drawer Scene 中使用自定义图标,它可以,但我没有看到任何文档告诉我如何打开或关闭抽屉!

这是我的路由器:

<Scene
    key="TabbarWrapper"
    component={NavigationDrawer}
    initial={true} >
    <Scene key="Tabbar"
           tabs={true}
           initial={true}
           tabBarStyle={styles.tabBar}
           default="ProductExplorer">

        <Scene key="ProductExplorer"
               title="Lists"
               icon={TabIcon}
               iconName={"list"}
               initial={true}
               leftButtonIconStyle={{tintColor: "#FFF"}}
               renderBackButton={backButtonFunction}
               component={ProductExplorer}/>

        <Scene key="Profile"
               title="Profile"
               icon={TabIcon}
               iconName={"gear"}
               leftButtonIconStyle={{tintColor: "#FFF"}}
               renderBackButton={backButtonFunction}
               component={Profile}/>
    </Scene>

</Scene>

这是我的按钮渲染器功能:

let backButtonFunction = function () {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android')TouchableElement = TouchableNativeFeedback;
    return (
        <TouchableElement onPress={()=>{ 
           **** my problem is here **** what do you think i should do?!what function must be call here to toggle open and close menu?
         }} style={{position : "absolute",left: 12,bottom:12}}>
            <Icon style={{color: "#FFF"}} name={"bars"} size={23}/>
        </TouchableElement>
    );
};
回答1

在此链接中回答

在抽屉组件中:

class NavigationDrawer extends React.Component {

    componentDidMount() {
        Actions.refresh({key: 'drawer', ref: this.refs.navigation});
    }

    render() {
        const state = this.props.navigationState;
        const children = state.children;

        return (
            <Drawer
                styles={drawerStyles}
                ref="navigation"
                type="displace"
                // onOpen={() => Actions.refresh({ key:  'drawer', open: true })}
                // onClose={() => Actions.refresh({ key: 'drawer', open: false })}
                content={<TabView />}
                tapToClose
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan
                tweenHandler={(ratio) => ({
                main: { opacity: Math.max(0.54, 1 - ratio) }
        })}
            >
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>
            </Drawer>
        );
    }
}

自定义按钮:

renderMenuButton() {
    return (
      <TouchableOpacity onPress={() => {Actions.get('drawer').ref.toggle()}}>
        <Icon name="ios-menu-outline" style={styles.navBarMenuIcon} />
      </TouchableOpacity>
    );
  }

这是我的场景:

 <Scene
                                key="drawer"
                                component={NavigationDrawer}
                                initial={true}
                            >
 /*another  Scene*/
</Scene>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 导航抽屉未从常规菜单按钮打开(Navigation drawer not opening from cutom menu button)
    问题 我正在使用Android应用程序,那边有一个导航抽屉。 由于导航抽屉工具栏不能透明,并且末尾的三个点按钮图标也不能更改,因此我选择了隐藏该工具栏,并显示我的自定义布局。 它会为我提供所需的所有功能。 但是我现在面临的问题是,一旦活动开始,如果我单击自定义菜单按钮,它将无法打开。 拖动并打开后,每当我单击菜单按钮时,它都会打开导航抽屉。 我可能会缺少什么? 这就是我正在做的事情,同时调试它甚至到达了else部分,但没有打开。 在BaseActivity中: drawer = (DrawerLayout) findViewById(R.id.drawer_layout); toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.addDrawerListener(toggle); toggle.syncState(); navigationView = (NavigationView) findViewById(R.id.nav_view); navigationView.setNavigationItemSelectedListener(this); ivLeft
  • 如何在操作栏的应用程序图标旁边添加“菜单”指示器?(How to add “menu” indicator next to Action Bar's app icon?)
    问题 至少Gmail和Youtube Android应用程序使用侧面菜单(导航抽屉?),该侧面菜单可通过滑动或单击应用程序图标(主页按钮)打开: 屏幕快照上方的菜单指示符/图标是否已作为Android SDK的现成部分? (或Google在其应用程序中使用的自定义图标?)无论如何,最简单的方法是使您的主页按钮看起来像这样,即,它就像打开菜单一样? ( targetSdkVersion 18; minSdkVersion 14) 解析度 终于让它工作了。 我缺少的是1)实际图标和2)延迟调用ActionBarDrawerToggle上的syncState() 。 回答1 要在应用程序中创建类似的实现/外观,您应该使用ActionBarDrawerToggle并将您的自定义图标设置为ActionBar主页按钮旁边的指示器。 例如 : import android.app.ActionBar; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.widget.DrawerLayout; private void setUpDrawerToggle(){ ActionBar actionBar = getActionBar(); actionBar
  • 如何使用自定义可绘制对象替换用于Android工具栏上的ActionBarToggle的汉堡包图标?(How to replace the hamburger icon used for ActionBarToggle on Android Toolbar with a custom drawable?)
    问题 我已经使用Android 5.0中的新工具栏实现了基本的ActionBarDrawerToggle。 但是,我无法弄清楚如何更改提供的默认汉堡包图标。 从android文档中,它说:“给定的Activity将链接到指定的DrawerLayout,并且工具栏的导航图标将设置为自定义可绘制对象...该可绘制对象在抽屉关闭时显示汉堡图标,在抽屉打开时显示箭头当抽屉打开时,它将在这两种状态之间进行动画处理。” 目前,我可以使用以下代码正常运行所有这些,但是我想用我自己的drawable替换默认提供的汉堡包。 这是我当前的代码: MainActivity.java @InjectView(R.id.main_activity_toolbar) Toolbar mToolbar; @InjectView(R.id.main_activity_drawer_layout) DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle savedInstanceState) { setContentView(R.layout.main_activity); super.onCreate(savedInstanceState); setSupportActionBar(mToolbar); mToolbar
  • 工具栏-仅通过一个活动即可从抽屉切换到后退按钮(Toolbar - Switching from drawer to back button with only one Activity)
    问题 我一直在寻找如何在抽屉打开/关闭图标(从汉堡到箭头)到简单的后退箭头之间切换的时间。 目前,我的应用程序只有一个Activity,可以在多个片段之间进行切换。 在某一时刻,我想在一个主要片段(即抽屉中的一个片段)之间过渡到一个分层结构,该片段分层地位于前一个片段之下(即“ Add New”片段)。 在这个新片段中,我希望工具栏显示后退按钮而不是抽屉按钮。 我一直在四处寻找各种解决方案。 这是最著名的: 将抽屉图标更改为向后箭头-我已成功删除了抽屉图标,但没有任何地方。 没有插入符号,没有后退按钮,没有图标。 我怀疑这是因为我的Activity没有父母,但是除了便宜的解决方法(创建另一个充当父项的Activity来启动主要Activity)之外,我迷茫了。 使用片段时在Android导航抽屉图像和Up插入符之间切换-与上述类似,但细节更多。 最终,该图标仍然不会变成后退按钮。 Android棒棒糖工具栏在打开/关闭抽屉和后退按钮之间进行切换-我发现很难做到这一点,但最终可以轻按抽屉图标并且不执行任何操作(尽管我相信我知道如何使它充当后退按钮)。 但是,图标不会改变。 目前,我正在考虑创建一个我隐藏并显示(以及隐藏/显示本机抽屉图标)的自定义图标的漫长而艰巨的方法。 但是,是否有更好的方式在抽屉按钮和后退按钮之间进行切换? 作为一个侧面但又相关的问题,我一直在查看Material
  • 1.Flutter 抽屉组件drawer 自定义宽度,触发按钮
    效果图如下: 实现代码如下: 详解都在代码内哦! drawer: Drawer( child: ListView( //抽屉里面一个list部件 padding: EdgeInsets.all(0), //顶部padding为0 children: <Widget>[ //所有子部件 UserAccountsDrawerHeader( //用户信息栏 accountName: Text("用户名"), accountEmail: Text("yonghuyouxiang@xxx.com"), currentAccountPicture: CircleAvatar( //头像 backgroundImage: NetworkImage('https://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'), ), otherAccountsPictures: <Widget>[ //其他账号头像 CircleAvatar(backgroundImage: NetworkImage('https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg'),)
  • 如何设置导航抽屉从右向左打开(How to set Navigation Drawer to be opened from right to left)
    问题 首先,我知道这个问题以前曾出现在这里,但经过很多尝试,我仍然没有成功。 我在Android Developers网站上处理该示例。 我试图将菜单设置为从右到左打开,而不是在示例中如何实现(从左到右)。 另外,我想将打开的菜单按钮移到操作栏的右侧。 我在这里也用了一些答案,例如这个答案。 我尝试更改视图和布局的重力,但出现错误: 绝对重力未找到抽屉视图 您能帮我找出代码中的问题是什么,我应该更改什么才能将菜单设置为从右侧打开,并将操作栏按钮移至右侧? xml代码在这里: <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_gravity="right" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:id="@+id/content_frame" android:layoutDirection="rtl" android:layout_width="match_parent" android
  • 如何检测导航抽屉是否打开?(How to detect if navigation drawer is open?)
    问题 标题说明了一切。 我想要做的就是知道导航抽屉是否打开。 我在网上搜索了很多,找到了isDrawerOpen(int drawerGravity)但找不到解释如何在方法中使用它的令人满意的答案。 如果有人向我解释,我将不胜感激。 提前致谢! 回答1 假设你已经在 xml 中定义了一个 drawerlayout: DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); ... if(mDrawerLayout.isDrawerOpen(GravityCompat.START)) { //drawer is open } 回答2 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle( this, /* host Activity */ mDrawerLayout, /* DrawerLayout object */ R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */ R.string.drawer_open, /* "open drawer"
  • 如何在设备屏幕右侧设置抽屉布局图标?(how to set Drawer Layout icon in right side of the device screen?)
    问题 我已经创建了抽屉布局示例应用程序,它工作正常,我的问题是抽屉布局从右到左完美地工作,但我试图将图标从左到右移动,但它不起作用给我你的建议..!!! 这可能还是不可能? <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="right" > <!-- The main content view --> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- The navigation drawer --> <ListView android:id="@+id/drawer_list" android:layout_width="240dp" android:layout_height=
  • 使用 NavigationDrawer 控制工具栏图标(Control the Toolbar icon with NavigationDrawer)
    问题 我目前在我的应用程序中使用android.support.v7.widget.Toolbar和android.support.v4.widget.DrawerLayout 。 一切正常,但有一点我想改变它的行为。 当我打开抽屉时,整个抽屉占据space of the Toolbar的space of the Toolbar 。 工具栏保持在顶部会很好,就像在Google Music app 。 我怎样才能做到这一点? 但最重要的不是前一个。 At first, the icon which is loaded in the application is the three stripped one 。 我意识到打开抽屉后,图标变成了一个箭头。 加载片段后,箭头仍然作为工具栏图标存在,即使我按下返回到第一个屏幕也是如此。 如何避免打开抽屉后出现箭头? 我想手动更改此图标,特别是当我加载较低级别的片段时。 谢谢你的帮助! 代码: public class HomeActivity extends BaseActivity { ... private DrawerLayout mDrawer; private ActionBarDrawerToggle mDrawerToggle; private ListView mDrawerList; private ListView
  • 在工具栏上禁用汉堡以返回箭头动画(Disable hamburger to back arrow animation on Toolbar)
    问题 使用汉堡包实现Toolbar以返回箭头动画非常容易。 我认为该动画毫无意义,因为根据材料设计规范,导航抽屉在打开时会覆盖Toolbar 。 我的问题是如何使用getSupportActionBar().setDisplayHomeAsUpEnabled(true);正确禁用此动画并显示汉堡包或后退箭头getSupportActionBar().setDisplayHomeAsUpEnabled(true); 这是我的操作方式,但是看起来很脏: mDrawerToggle.setDrawerIndicatorEnabled(false); if (showHomeAsUp) { mDrawerToggle.setHomeAsUpIndicator(R.drawable.lib_ic_arrow_back_light); mDrawerToggle.setToolbarNavigationClickListener(view -> finish()); } else { mDrawerToggle.setHomeAsUpIndicator(R.drawable.lib_ic_menu_light); mDrawerToggle.setToolbarNavigationClickListener(view -> toggleDrawer()); }
  • 如何从Android appcompat v7 21库实现DrawerArrowToggle(How to implement DrawerArrowToggle from Android appcompat v7 21 library)
    问题 因此,既然已经发布了Android 5.0,我想知道如何实现动画的操作栏图标。 这个库在这里对我来说很好实现,但是既然appcompat v7库具有它,如何实现? 该库在themes.xml中引用了它 <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item> 在这种风格下 <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat"> 更新 我使用v7 DrawerToggle实现了此功能。 但是我不能定型。 请帮忙 我在v7 styles_base.xml中找到了样式 <style name="Base.Widget.AppCompat.DrawerArrowToggle" parent=""> <item name="color">?android:attr/textColorSecondary</item> <item name="thickness">2dp</item> <item name="barSize">18dp</item> <item name="gapBetweenBars">3dp</item> <item name="topBottomBarArrowSize">11.31dp<
  • 每次打开Chrome DevTools时,默认情况下如何隐藏“控制台抽屉”?(How can I keep the “Console Drawer” hidden by default every time I open Chrome DevTools?)
    问题 当我打开DevTools时,有一个小按钮可以切换“ Hide Drawer. 和Show Console. 。 除了名称不一致之外,“抽屉”对我来说也很烦人,因为它占用了分配给devtools的小屏幕空间的大部分(我被固定在了底部)。 我如何才能永久关闭此“抽屉”? 还是如果我不能做到这一点,我至少可以将其高度保持在尽可能低的水平吗? (每次打开它都会返回默认高度) 回答1 我解决了从“仿真”选项卡下的“欺骗用户代理”选项中删除标记的相同问题(我什至不知道为什么标记了该标记!)。 回答2 至少您可以按ESC切换控制台区域的隐藏和显示。 回答3 以前的答案都没有对我有用。 我所有的仿真选项卡选项都已清除/重置。 我不确定它是否是新的,但事实证明,搜索图标旁边的左侧有一个“切换模拟”按钮。 我的是蓝色的,所以我单击它使其变为非蓝色。 屏幕截图如下。 现在,一切都快乐。 太令人沮丧了! 回答4 显然,在设置按钮旁边有一个显示/隐藏控制台按钮。 此处的信息和屏幕截图-https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console 回答5 我的问题是Chrome菜单中启用了控制台,您可以通过在开发工具设置中单击“控制台”选项将其关闭: 回答6 此解决方案不再适用于新的铬版本。
  • 如何从 Android appcompat v7 21 库实现 DrawerArrowToggle(How to implement DrawerArrowToggle from Android appcompat v7 21 library)
    问题 所以现在 Android 5.0 发布了,我想知道如何实现动画操作栏图标。 这里的这个库对我来说很好,但是既然 appcompat v7 库有它,它如何实现? 库在 themes.xml 中引用它 <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item> 在这种风格下 <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat"> 更新 我使用 v7 DrawerToggle 实现了这个。 但是我不能设计它。 请帮忙 我在 v7 styles_base.xml 中找到了它的样式 <style name="Base.Widget.AppCompat.DrawerArrowToggle" parent=""> <item name="color">?android:attr/textColorSecondary</item> <item name="thickness">2dp</item> <item name="barSize">18dp</item> <item name="gapBetweenBars">3dp</item> <item name="topBottomBarArrowSize">11
  • 更改导航抽屉图标(Change Icon Of Navigation Drawer)
    问题 我在将导航抽屉图标更改为自定义图标时遇到麻烦。 我目前必须实现在顶部具有3条水平线的标准抽屉图标,但是现在我想用我的自定义抽屉图标替换它。 这是我的mDrawerToggle目前的mDrawerToggle : mDrawerToggle=new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.app_icon, R.string.drawer_open) { // My code }; 回答1 这是从创建导航抽屉中获取的示例代码 活动类 public class MainActivity extends Activity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; ... public void onCreate(Bundle savedInstanceState) { ... mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new ActionBarDrawerToggle( this, /* host Activity */ mDrawerLayout, /*
  • Android导航抽屉切换图标向右(Android navigation drawer toggle icon to right)
    问题 我的要求如下图所示。我的导航抽屉应从右侧打开。 我已经实现了。 我的导航抽屉从右到左打开。 但是问题是切换图标始终在左侧。 如何在右侧设置切换图标? 我已经检查了以下SO问题,但没有一个得到任何帮助: 从右到左更改导航抽屉中的切换按钮图像图标 抽屉在右侧抽屉中切换 在此处输入链接说明 这是我尝试过的: 我的布局activity_main.xml的代码 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="end"> <android.support.design
  • Android-将ActionBar后退按钮切换到导航按钮(Android - Switch ActionBar Back Button to Navigation Button)
    问题 我遇到以下问题: 我知道如何设置工具栏以显示后退按钮图标而不是汉堡按钮图标。 由此: 对此: 使用: getSupportActionBar().setDisplayHomeAsUpEnabled(true); 现在,我要执行相反的操作,我要从“后退”按钮图标转到“汉堡”图标: 到这里: 我怎样才能做到这一点? 更新: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayShowTitleEnabled(false); } private void enableViews(boolean enable) { if(enable) { // Enables back button icon getSupportActionBar().setDisplayHomeAsUpEnabled(true); } else { // TODO: Enables burger icon } } 回答1 如果我假设您在布局中使用的是android.support.v4.widget.DrawerLayout
  • 如何创建自定义导航抽屉,该抽屉将在抽屉onitemclick旁边打开ListView?(How to create custom navigation drawer which opens ListView adjacent to drawer onitemclick?)
    问题 我已经创建了简单的导航抽屉,但是当我遇到图像中的导航抽屉时,我被卡住了。 我不知道如何实现这种功能。 在此图像中,“城市”是导航抽屉的项目,当我单击城市时,它会打开与之相邻的列表。 回答1 这是完整代码,因为我不知道详细信息,它可能无法真正满足您的要求: 首先,我想展示一下演示: string.xml: <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">NavigationDrawer</string> <string name="hello_world">Hello world!</string> <string name="action_settings">Settings</string> <string-array name="left"> <item name="1">1</item> <item name="2">2</item> <item name="3">3</item> </string-array> <string-array name="right1"> <item name="1*1">1*1</item> <item name="1*2">1*2</item> <item name="1*3">1*3</item> <item name="1*4"
  • 是否可以在 uiautomator 中滑动打开/关闭导航抽屉(Is it possible to slide open/closed a navigation drawer in uiautomator)
    问题 有没有人能够做到这一点。 UiScrollable、swipeLeft 和 swipeRight 似乎对其没有任何影响。 我正在使用带有最新 api 的 Nexus 5 模拟器。 有没有人能把它拉下来? 回答1 TL;DR : 使用 ActionBarDrawerToggle 构造函数中设置的内容描述 设置导航抽屉时,请设置带有打开和关闭内容描述的ActionBarDrawerToggle 。 // Open drawer content description for accessibility private static final String CONTENT_DESCRIPTION_OPEN_DRAWER = "Open drawer"; // Close drawer content description for accessibility private static final String CONTENT_DESCRIPTION_CLOSE_DRAWER = "Close drawer"; private void setUpNavigationDrawer() { mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerToggle = new
  • 单击工具栏上的汉堡包图标不会打开导航抽屉(Clicking hamburger icon on Toolbar does not open Navigation Drawer)
    问题 我有这个导航抽屉,它工作得很好。 重构代码,我删除了活动中的所有onOptionsItemSelecteds ,并使所有活动都继承自基本活动,该基本活动扩展了AppComplatActivity并实现了所有必要的方法。 在此之后,即使我具有syncstate ()和其他所有功能,也无法再点击汉堡包图标。 任何线索为什么这不起作用? 活动之一: public class MainActivity extends BaseActivity implements SearchFilterFragment.OnFragmentInteractionListener { NavigationView navigationView; DrawerLayout drawerLayout; private Tracker mTracker; @Override protected void onResume() { super.onResume(); drawerLayout.openDrawer(GravityCompat.START); } @Override protected void onPostResume() { super.onPostResume(); mTracker.setScreenName("MainActivity" + "-----"); mTracker
  • 如何使用Appcompat v7 21,工具栏和DrawerLayout将Burger动画化为Arrow(How animate Burger to Arrow with Appcompat v7 21, Toolbar and DrawerLayout)
    问题 我正在将android.support.v7.widget.Toolbar与android.support.v4.widget.DrawerLayout一起使用。 它工作正常,在关闭导航抽屉时显示Burger图标,在打开抽屉时显示箭头图标。 我想禁用抽屉,并在应用程序中的某些事件上将Burger图标动画化为Arrow。 我试图将锁定模式设置为关闭,但是v7.app.ActionBarDrawerToggle仍在显示Burger,并且它打开了Drawer。 mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); 有任何想法吗? 谢谢! 更新: 不,我可以更改图标的状态,也可以启用/禁用抽屉,但是动画无法使用这种方法: @Override protected void onCreate(Bundle savedInstanceState) { ... Toolbar toolbar = (Toolbar) findViewById(R.id.application_toolbar); setSupportActionBar(toolbar); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout); mDrawerToggle