blocks|key|4466178|text|你应该像你提到的那样使用"refs“。为此，为您的抽屉组件设置"ref“属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4466179|<DrawerLayoutAndroid
+++...
+++ref={'DRAWER_REF'}
+++...
/>|code-block|syntax|javascript|4466180|然后在你的组件中使用this.refs来访问它，并在该引用上调用openDrawer或closeDrawer+(例如，你可能想要有Touchable元素来触发这个调用)：|offset|length|style|CODE|4466181|this.refs['DRAWER_REF'].openDrawer();|4466182|entityMap^0|0|0|A|9|W|A|17|B|1T|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

You should use "refs" as you've mentioned. To do so, for your drawer component have "ref" attribute set:

<pre><code>&lt;DrawerLayoutAndroid
 ...
 ref={'DRAWER_REF'}
 ...
/&gt;
</code></pre>

Then in your component use <code>this.refs</code> to access it and call <code>openDrawer</code> or <code>closeDrawer</code> on that ref (e.g. you may want to have <code>Touchable</code> element that will trigger this call):

<pre><code>this.refs['DRAWER_REF'].openDrawer();
</code></pre>

blocks|key|4466554|text|使用ReactNative示例，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4466555|var+DrawerTest+=+React.createClass({
++openDrawer:function()+{
++++this.refs['DRAWER'].openDrawer()
++},
++render:+function()+{
++++var+navigationView+=+(
++++++++<View+style={{flex:+1,+backgroundColor:+'#fff'}}>
++++++++++<Text+style={{margin:+10,+fontSize:+15,+textAlign:+'left'}}>I'm+in+the+Drawer!</Text>
++++++++</View>
++++);
++++return+(
++++++++++<DrawerLayoutAndroid
++++++++++++++drawerWidth={300}
++++++++++++++ref={'DRAWER'}
++++++++++++++drawerPosition={DrawerLayoutAndroid.positions.Left}
++++++++++++++renderNavigationView={()+=>+navigationView}>
++++++++++++<View+style={{flex:+1,+alignItems:+'center'}}>
++++++++++++++<Text+style={{margin:+10,+fontSize:+15,+textAlign:+'right'}}>Hello</Text>
++++++++++++++<Text+style={{margin:+10,+fontSize:+15,+textAlign:+'right'}}>World!</Text>
++++++++++++++<TouchableHighlight+onPress={this.openDrawer}>
++++++++++++++++<Text>{'Open+Drawer'}</Text>
++++++++++++++</TouchableHighlight>
++++++++++++</View>
++++++++++</DrawerLayoutAndroid>
++++);

++}
});|code-block|syntax|javascript|4466556|Full+File+Gist|offset|length|4466557|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/TiagoGouvea/ba30975dd125d8a358ae^0|0|0|0|E|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Using the ReactNative sample, you can do like that:

<pre><code>var DrawerTest = React.createClass({
 openDrawer:function() {
 this.refs['DRAWER'].openDrawer()
 },
 render: function() {
 var navigationView = (
 &lt;View style={{flex: 1, backgroundColor: '#fff'}}&gt;
 &lt;Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}&gt;I'm in the Drawer!&lt;/Text&gt;
 &lt;/View&gt;
 );
 return (
 &lt;DrawerLayoutAndroid
 drawerWidth={300}
 ref={'DRAWER'}
 drawerPosition={DrawerLayoutAndroid.positions.Left}
 renderNavigationView={() =&gt; navigationView}&gt;
 &lt;View style={{flex: 1, alignItems: 'center'}}&gt;
 &lt;Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}&gt;Hello&lt;/Text&gt;
 &lt;Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}&gt;World!&lt;/Text&gt;
 &lt;TouchableHighlight onPress={this.openDrawer}&gt;
 &lt;Text&gt;{'Open Drawer'}&lt;/Text&gt;
 &lt;/TouchableHighlight&gt;
 &lt;/View&gt;
 &lt;/DrawerLayoutAndroid&gt;
 );

 }
});
</code></pre>

<a href="https://gist.github.com/TiagoGouvea/ba30975dd125d8a358ae" rel="noreferrer">Full File Gist</a>

blocks|key|4466285|text|我只想添加另一个解决方案，特别是在使用Navigator渲染场景时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4466286|如果是这种情况，那么上面的解决方案将无法工作，因为它不能访问在DrawerLayoutAndroid中指定的ref，并且它实际上将返回|offset|length|style|CODE|4466287|"undefined+is+not+an+object+(evaluating+'this.refs['DRAWER_REF']')"|code-block|syntax|javascript|4466288|或者类似的东西。|4466289|解决方案：|4466290|创建我们自己的工具栏，这样我们就可以将我们的渲染组件传递给它。|4466291|MyToolbar.js|4466292|...+import+stuff+...

module.exports+=+React.createClass({
++render:+function()+{
++++return+(
++++++<ToolbarAndroid
++++++++title={this.props.title}
++++++++navIcon+=+{{uri:+"ic_menu_white_24dp",+isStatic:+true}}
++++++++style+=+{styles.toolbar}
++++++++titleColor='#FFFFFF'
++++++++onIconClicked={this._onIconClicked}/>
++++);
++},

++_onIconClicked:+function(){
++++this.props.sidebarRef.refs['DRAWER'].openDrawer();
++++//+sidebarRef+is+the+rendering+component+we're+passing
++}
});|4466293|OpenDrawerFromToolbar.js|4466294|...
module.exports+=+React.createClass({
++render:+function()+{
++++var+navigationView+=+(
++++++<View+style={{flex:+1,+backgroundColor:+'#fff'}}>
++++++++<Text+style={{margin:+10,+fontSize:+15,+textAlign:+'left'}}>In+the+Drawer!</Text>
++++++</View>
++++);

++++return+(
++++++<View+style={styles.container}>
++++++++<DrawerLayoutAndroid+drawerWidth+=+{300}
+++++++++++++++++++++++++drawerPosition+=+{DrawerLayoutAndroid.positions.Left}
+++++++++++++++++++++++++renderNavigationView+=+{()+=>+navigationView}
+++++++++++++++++++++++++ref={'DRAWER'}>
++++++++<MyToolbar+style={styles.toolbar}
+++++++++++++++++++title={'My+Awesome+App'}
+++++++++++++++++++navigator={this.props.navigator}
+++++++++++++++++++sidebarRef={this}/>+//+pass+the+component+to+MyToolbar
++++++++<View+style+=+{{flex:+1,+alignItems:+'center'}}>
++++++++++<Text+style+=+{{margin:+10,+fontSize:+15,+textAlign:+'right'}}>Hello</Text>
++++++++++<Text+style+=+{{margin:+10,+fontSize:+15,+textAlign:+'right'}}>World!</Text>
++++++++</View>
++++++</DrawerLayoutAndroid>
++++</View>
++);
++},

++_setDrawer:+function()+{
++++this.refs['DRAWER'].openDrawer();
++}
});|4466295|然后我们的导航器组件和它的renderingScene函数将会工作：|4466296|module.exports+=+React.createClass({
++render:+function()+{
++++return+(
++++++<Navigator
++++++++style+=+{styles.container}
++++++++initialRoute+=+{{+name:+'openDrawerFromToolbar',+index:+0+}}
++++++++renderScene+=+{this.navigatorRenderScene}
++++++++configureScene={+()+=>+{+return+Navigator.SceneConfigs.PushFromRight;+}}/>
++);
},

navigatorRenderScene:+function(route,+navigator)+{
++_navigator+=+navigator;
++++++return+(
++++++++++<OpenDrawerFromToolbar
++++++++++++route={route}
++++++++++++navigator={navigator}
++++++++++++data={route.data}/>
++++++);
++}
});|4466297|entityMap^0|0|V|J|0|0|0|0|0|0|C|0|0|0|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|U|3|V|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1L|8|@]|9|@]|A|$K|L]]|$1|10|3|11|5|6|7|1M|8|@]|9|@]|A|$]]|$1|12|3|13|5|J|7|1N|8|@]|9|@]|A|$K|L]]|$1|14|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|15|$]]

Just want to add another solution, especially when Navigator is used to render the scene.

If this is the case, then the above solutions won't work as it doesn't have access to ref specified in the <code>DrawerLayoutAndroid</code>, and it will in fact return

<pre><code>"undefined is not an object (evaluating 'this.refs['DRAWER_REF']')"
</code></pre>

or something like that.

Solution:

Create our own Toolbar so that we can pass our rendering component to it.

<code>MyToolbar.js</code>

<pre><code>... import stuff ...

module.exports = React.createClass({
 render: function() {
 return (
 &lt;ToolbarAndroid
 title={this.props.title}
 navIcon = {{uri: "ic_menu_white_24dp", isStatic: true}}
 style = {styles.toolbar}
 titleColor='#FFFFFF'
 onIconClicked={this._onIconClicked}/&gt;
 );
 },

 _onIconClicked: function(){
 this.props.sidebarRef.refs['DRAWER'].openDrawer();
 // sidebarRef is the rendering component we're passing
 }
});
</code></pre>

<code>OpenDrawerFromToolbar.js</code>

<pre><code>...
module.exports = React.createClass({
 render: function() {
 var navigationView = (
 &lt;View style={{flex: 1, backgroundColor: '#fff'}}&gt;
 &lt;Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}&gt;In the Drawer!&lt;/Text&gt;
 &lt;/View&gt;
 );

 return (
 &lt;View style={styles.container}&gt;
 &lt;DrawerLayoutAndroid drawerWidth = {300}
 drawerPosition = {DrawerLayoutAndroid.positions.Left}
 renderNavigationView = {() =&gt; navigationView}
 ref={'DRAWER'}&gt;
 &lt;MyToolbar style={styles.toolbar}
 title={'My Awesome App'}
 navigator={this.props.navigator}
 sidebarRef={this}/&gt; // pass the component to MyToolbar
 &lt;View style = {{flex: 1, alignItems: 'center'}}&gt;
 &lt;Text style = {{margin: 10, fontSize: 15, textAlign: 'right'}}&gt;Hello&lt;/Text&gt;
 &lt;Text style = {{margin: 10, fontSize: 15, textAlign: 'right'}}&gt;World!&lt;/Text&gt;
 &lt;/View&gt;
 &lt;/DrawerLayoutAndroid&gt;
 &lt;/View&gt;
 );
 },

 _setDrawer: function() {
 this.refs['DRAWER'].openDrawer();
 }
});
</code></pre>

Then our Navigator component with its renderingScene function will work:

<pre><code>module.exports = React.createClass({
 render: function() {
 return (
 &lt;Navigator
 style = {styles.container}
 initialRoute = {{ name: 'openDrawerFromToolbar', index: 0 }}
 renderScene = {this.navigatorRenderScene}
 configureScene={ () =&gt; { return Navigator.SceneConfigs.PushFromRight; }}/&gt;
 );
},

navigatorRenderScene: function(route, navigator) {
 _navigator = navigator;
 return (
 &lt;OpenDrawerFromToolbar
 route={route}
 navigator={navigator}
 data={route.data}/&gt;
 );
 }
});
</code></pre>

I'm new to React native (and React) and I'm playing around a little bit with it.

I managed to add a DrawerLayout that I can drag from the left of my screen.
However I'd like to open it when I click on my menu icon in my ToolbarAndroid.

I tried to use "refs" but it doesn't seem to work

I hope I'm clear enough.

Thank you

Show DrawerLayoutAndroid via ToolbarAndroid => onIconClicked

我刚开始使用原生的React (和React)，我正在尝试使用它。我设法添加了一个可以从屏幕左侧拖动的DrawerLayout。然而，当我点击ToolbarAndroid中的菜单图标时，我想打开它。我试着使用"refs“，但似乎不起作用。我希望我说得够清楚了。谢谢

问通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroid
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroidEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroid
EN