props - React Native acceda a this.prop desde la función interna

react native video controls

Question

Tengo el siguiente código:

module.exports = class Menu extends Component {

    about() {
        this.props.nav.push({
            component: TestView,
            title: ''Test View'',
        });
    }

    render() {
        return (
            <ScrollView
                scrollsToTop={false}
                style={styles.menu}
                navigator={this.props.nav}>
                <View style={styles.logoContainer}>
                    <Image
                        style={styles.logo}
                        source={{ uri, }}/>
                </View>

                <Text onPress={this.about} style={styles.item}>About</Text>
                <Text style={styles.item}>Account</Text>
            </ScrollView>
        );
    }
};

Sigo recibiendo el mensaje de error:

"undefined is not an object ("evaluating this.props.nav") 

cuando "onPress" llama "this.about". Coloqué un console.log dentro de la función de renderizado y pude ver que this.props.nav contenía un valor. El problema ocurre en la función about () y no estoy seguro de por qué.

¿Cualquier sugerencia seria genial?

Gracias

Answer 1

No puedo estar seguro, pero esto parece un Javascript, this problema vinculante para mí. En los componentes de ReactJS definidos con la sintaxis de la clase ES6 no se vincula automáticamente this , por lo que las reglas de Javascript le muerden y varían el valor de this dependiendo de cómo se llame a una función.

Es posible que necesite usar .bind explícitamente al configurar su manejador de botones:

<Text onPress={this.about.bind(this)} style={styles.item}>About</Text>

Para que this en la función about() sea ​​el mismo que en la función render() donde configura el controlador.

Encontré un repositorio que muestra otros métodos para resolver el mismo problema, como el enlace en un constructor o el uso de funciones de "Flecha de grasa" para su controlador.

Mi experiencia es con el uso de React para la web, y no estoy seguro de si React Native difiere en esta área.

Answer 2

También puede volver a vincular la declaración del método en sí para que no tenga que recordar llamar a .bind(this) en su JSX. Esto es útil si tiene muchos botones que llaman a la misma función.

Por ejemplo:

class Menu extends Component {
    constructor(props) {
        super(props);
        // Replace instance method with a new ''bound'' version
        this.about = this.about.bind(this);
    }

// Elsewhere in JSX you don''t need to remember to call .bind(this)
<Text onPress={this.about} style={styles.item}>About</Text>