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

> 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,justifyContent: 'center',alignItems: 'center',backgroundColor: '#5591ea'
    }
});