react native - example - Mostrar DrawerLayoutAndroid mediante ToolbarAndroid=> onIconClicked

react native drawer items

Question

Soy nuevo en React Native (y React) y estoy jugando un poco con eso.

Logré agregar un DrawerLayout que puedo arrastrar desde la parte izquierda de mi pantalla. Sin embargo, me gustaría abrirlo cuando hago clic en el icono de mi menú en mi barra de herramientas de Android.

Traté de usar "refs" pero no parece funcionar

Espero que sea lo suficientemente claro.

Gracias

Answer 1

Debes usar "refs" como has mencionado. Para hacerlo, para su componente de cajón tiene el atributo "ref" establecido:

<DrawerLayoutAndroid
   ...
   ref={''DRAWER_REF''}
   ...
/>

Luego, en su componente, use this.refs para acceder a él y llame a openDrawer o closeDrawer en esa referencia (por ejemplo, es posible que desee tener un elemento Touchable que activará esta llamada):

this.refs[''DRAWER_REF''].openDrawer();

Answer 2

Seguir todos esos fragmentos de código y seguir obteniendo lo undefined is not an object error de undefined is not an object .

Luego encontré este hilo en GitHub que finalmente resolvió mi problema y explica perfectamente el problema de las referencias .

Para seguir el ejemplo de DrawerLayoutAndroid en la documentación de React Native ( http://facebook.github.io/react-native/docs/drawerlayoutandroid.html ), este es el código que funciona:

constructor() {
  super();
  this.openDrawer = this.openDrawer.bind(this);
} 

openDrawer() {
  this.drawer.openDrawer();
}

render() {
  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) => this.drawer = _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>
  );
}

Answer 3

Solo desea agregar otra solución, especialmente cuando se utiliza Navigator para renderizar la escena.

Si este es el caso, entonces las soluciones anteriores no funcionarán ya que no tienen acceso a la referencia especificada en DrawerLayoutAndroid y, de hecho, devolverá

"undefined is not an object (evaluating ''this.refs[''DRAWER_REF'']'')"

o algo así.

Solución:

Cree nuestra propia barra de herramientas para que podamos pasarle nuestro componente de representación.

MyToolbar.js

... 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
  }
});

OpenDrawerFromToolbar.js

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

Entonces nuestro componente Navigator con su función renderingScene funcionará:

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}/>
      );
  }
});

Answer 4

Usando la muestra ReactNative, puedes hacer eso:

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>
    );

  }
});

Archivo completo

Answer 5

"undefined no es un objeto" : la mayoría de nosotros terminamos aquí con una solución anterior.

Asegúrese de haber utilizado correctamente la sintaxis de ES6 como se menciona a continuación.

Sintaxis incorrecta:

onPress={this.drawer()}

Sintaxis correcta:

onPress={() => this.drawer()}

Código:

<DrawerLayoutAndroid
   ...
   ref={''DRAWER_REF''}
   ...
/>

--------------------------------------------------

//Write this just before render() method

drawer = () => {
  this.refs[''DRAWER_REF''].openDrawer();
}

--------------------------------------------------

<TouchableHighlight onPress={() => this.drawer()}>
   <Icon name="bars" size={30} color="#900"/>
</TouchableHighlight>