react-native – ReactNative / MobX：如何从MobX访问组件引用？

如何从MobX访问组件引用,下面的示例,运行’doSomething’乐趣是在componentDidMount之后,我得到的不是函数错误,
我想弄清楚如何在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}/>)
    }
}

我已经解决了;

> 1.TestComponent是我的根组件,它包裹两个组件’Author’和’TestSome’
> 2.重要的是,我想通过组件Author调用组件TestSome的功能
> 3.所以,我使用ref,但我不能,我得到一个错误：this._testSome.testFun()不是函数
> 4.然后,使用debug remote,我发现,有一个道具名称’wrappedInstance’,所以正确的调用是：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'
    }
});