react-native - ReactNative/MobX : How to access component refs from MobX?

Question

如何从 MobX 访问组件引用，下面的示例，在 componentDidMount 之后运行 'doSomething' 乐趣，我得到了一个非函数错误，
我想弄清楚如何在 MobX 中访问 ref。
任何事情都会很感激。多谢。

@observer
class MyNav extends Component {
    testFun() {
    }
}

@observer
class MyComponent extends Component {
    doSometing() {
        this._myNav.testFun();//this._myNav.testFun() is not a function
    }

    render() {
        return (<MyNav ref={(ref) => this._myNav = ref}/>)
    }
}

Answer 1

我已经解决了；

1.TestComponent 是我的根组件，它包装了两个组件 'Author' 和 'TestSome'

2.重要的是，我想通过组件作者

调用组件TestSome的函数

3.所以，我使用了 ref，但我不能，我得到一个错误:this._testSome.testFun() 不是函数

4.然后，使用调试远程，我发现，有一个 Prop 名称'包裹实例 '，所以正确的调用是: this._testSome.wrappedInstance.testFun()

下面是我的代码，希望能有所帮助，谢谢。

'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import {observer, Provider, inject} from 'mobx-react/native';
import {observable, action, autorun} from 'mobx';

let appState = observable({
    name: 'walker xiong'
});

@inject('store') @observer
class TestSome extends Component {
    _testView = null;

    testFun() {
        this._testView && this._testView.setNativeProps({style: {backgroundColor: '#ff0000'}});
    }

    render() {
        return <View ref={(ref) => this._testView = ref} style={[Styles.container, {backgroundColor: '#eaeaea'}]}/>;
    }
}

@inject('store') @observer
class Author extends Component {
    static defaultProps = {
        doSomething: null
    };

    render() {
        let {name} = this.props.store;
        return (
            <TouchableOpacity
                activeOpacity={1}
                onPress={() => this.props.doSomething && this.props.doSomething()}
                style={Styles.container}>
                <Text style={{fontSize: 20, color: '#ff0000'}}>{`${name}`}</Text>
            </TouchableOpacity>
        );
    }
}

@inject('store') @observer
class TestComponent extends Component {
    _testSome = null;

    /**
     * 1. TestComponent is my root component, and it wrap tow components 'Author' and 'TestSome'
     * 2. the important is , i want to call component TestSome's function through component Author
     * 3. So , i use ref, but i can't , and i got an error: this._testSome.testFun() is not a function
     * 4. and then , use debug remote, and i figure out that ,there is an props name 'wrappedInstance', so the correct call is : this._testSome.wrappedInstance.testFun()
     */
    doSomething() {
        // this._testSome && this._testSome.testFun();//it is wrong
        this._testSome && this._testSome.wrappedInstance.testFun();//it is true
    }

    render() {
        return (
            <View style={Styles.wrap}>
                <Author doSomething={() => this.doSomething()}/>
                <TestSome ref={(ref) => this._testSome = ref}/>
            </View>
        );
    }
}

export default class ReactionsComponent extends Component {
    render() {
        return (
            <Provider store={appState}>
                <TestComponent/>
            </Provider>
        )
    }
};

/* style */
const Styles = StyleSheet.create({
    wrap: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    container: {
        marginTop: 20,
        width: 300,
        height: 100,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#5591ea'
    }
});