Soy nuevo en reaccionar, y mi objetivo es pasar una función de un componente de clase para ejecutar dentro de un componente de clase con un clic de botón. Desglose del código como se muestra a continuación.

Clase de componente de clase como se muestra a continuación

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Dimensions,
  Text,
  View
} from 'react-native';
import Header from './src/components/Header';
import { Drawer } from 'native-base';

export default class App extends Component {
  closeDrawer=()=> {
   this._drawer._root.close()
  };
 openDrawer=()=> {
   this._drawer._root.open()
 };


  render() {
    return (
      <Drawer
        openDrawerOffset={100}
        styles={drawerStyles}
        ref={(ref) => { this._drawer = ref; }}
        content={<SideBar navigator={this._navigator} />}
        onClose={() => this.closeDrawer()} >
        <View style={{ flex: 1 }} >

          <View>
            <Header openDrawerClicked={this.openDrawer} />
          </View>

        </View>
      </Drawer>
    );
  }
}

Necesito pasar la función "openDrawer" primero al componente de encabezado, y luego dentro de eso tengo un botón configurado en un componente secundario separado donde se configura el clic del botón.

Componente de encabezado

const Header = (props) => {

    return (

                <View style={styles.menuViewStyle}>
                    <Button imagePath={'menuIcon'}/>
                </View>
    );
};

Componente de botón donde necesito que se ejecute la función y alternar las funciones de apertura y cierre.

const assets = require('./assets')

const ButtonWithImage = (props) => {
    const { buttonStyle } = styles;
    const clickEvent = () => {
        // Button click event
    }

    return (
        <TouchableOpacity onPress={clickEvent} style={buttonStyle}>
            <Image
                source={assets[props.imagePath]}
                style={styles.ImageIconStyle}
            />
        </TouchableOpacity>
    );
};
1
danu 15 feb. 2018 a las 08:01

2 respuestas

La mejor respuesta
export default class App extends Component {
  openDrawer=()=> { //bind lexical scope using arrow synax
    this._drawer._root.open()
  };

  render() {
    return (
      //....
          <View>
            <Header openDrawerClicked={this.openDrawer} />
          </View>
    );
  }
}

En el encabezado:

const Header = ({openDrawerClicked}) => {  // get `openDrawerClicked`

    return (
   //passed `openDrawerClicked` for Button component
                <View style={styles.menuViewStyle}>
                    <Button openDrawer= {openDrawerClicked} imagePath={'menuIcon'}/>
                </View>
    );
};

En el botón:

const ButtonWithImage = (props) => {
    const clickEvent = () => {
        props.openDrawer();
    }

    return (
        <TouchableOpacity onPress={props.clickEvent} style={buttonStyle}>
            //...
        </TouchableOpacity>
    );
};
3
RIYAJ KHAN 15 feb. 2018 a las 05:10

Para eso, primero debe pasar la función del componente Encabezado al componente Botón, así:

<Button imagePath={'menuIcon'} openDrawerClicked={props.openDrawerClicked} />

Luego, dentro del componente del botón, llame a ese método, así:

const clickEvent = () => {
    props.openDrawerClicked();
}

Sugerencia:

Para evitar confusiones, es mejor usar el mismo nombre en todo el lugar, ya sea openDrawerClicked o openDrawer; de lo contrario, en el componente principal, el nombre de la función será openDrawer y el nombre del niño interno será openDrawerClicked .

1
Mayank Shukla 15 feb. 2018 a las 05:06