如何调用另一个界面里组件的函数



  • 例如我在index.android.js文件中调用另外一个js文件(这里叫second.js,有组件Second,组件中有方法handleOnPress() ),采用<navigator>,在render中输出一个<touchableOpacity onPress={??}></touchableOpacity>,这里的onPress事件如何调用second.js中的handleOnPress()方法??
    坐等解答:smiley:



  • 贴代码吧,你说得不太清楚



  • 代码有点长 等下



  • 这里我精简了下代码:就是说我这里在用一个界面index.android.js,我现在想把三个组件写到不同的js文件中,然后通过index.android.js调用,具体点说就是,我想从组件一中的onPress调用组件二中的onPressFeed()方法吗,应该怎么做?
    这里是代码:
    //第一个组件
    var Login = React.createClass({
    goBack(){
    this.props.navigator.push({name:"default"});
    },

    render(){
        return(
    
            <View style={styles.mainBox}>
                
                <View style={styles.flex3}>
                    <View style={styles.button}>
                        <TouchableOpacity activeOpacity={0.6}   onPress={this.goBack}>
                            <View style={styles.buttonBg}><Text style={styles.buttonText} >登  陆</Text></View>
                        </TouchableOpacity>
                    </View>
                    
                </View>
            </View>
        )
    }
    

    });

    //第二个组件
    var WelcomeView = React.createClass({
    onPressFeed(){
    this.props.navigator.push({name:'login'})
    },
    render(){
    console.log('welcome to loading...');
    return(
    <View style={styles.container}>
    <Text style={styles.welcome} onPress={this.onPressFeed}>
    i am a welcome view!tab to back to feed view.
    </Text>
    </View>
    )
    }
    });

    //第三个组件
    var DefaultView = React.createClass({
    render(){
    return(
    <View style={styles.container}>
    <Text style={styles.welcome}> Default view</Text>
    </View>
    )
    }
    });

    var hoh = React.createClass({

    configureScene(route){
        return Navigator.SceneConfigs.FadeAndroid;
    },
    
    renderScene(router,navigator){
        var Component = router.component;
        this._navigator = navigator;
        switch (router.name){
            case "welcome":
                Component = WelcomeView;
                break;
            case "login":
                Component = Login;
                break;
            default://default view
                Component = DefaultView;
        }
        return <Component navigator={navigator} />
    },
    
    componentDidMount(){
        var navigator = this._navigator;
        BackAndroid.addEventListener('hardwareBackPress',function(){
            if(navigator && navigator.getCurrentRoutes().length>1){
                navigator.pop();
                return true;
            }
            return false;
        });
    },
    
    componentWillMount(){
        BackAndroid.removeEventListener('hardwareBackPress');
    },
    
    
    render(){
        return(
            <Navigator
                initialRoute = {{name:'welcome'}}
                configureScene = {this.configureScene}
                renderScene = {this.renderScene} />
        );
    }
    

    });



  • 1、你的代码中es5和es6语法混杂,是错误的,请认真学习论坛blog区中的关于es6的对比讲解
    2、跨组件调用的前提是两个组件在同一父组件中,或至少都还“存活”,然后可以在父组件层面通过ref来调用。但如果都是navigator的子组件,则不可能同时存在,只能是一个替换另一个。这样的跨组件调用,从设计上来说是不正确的(就好比在小区门口调用卧室的钥匙)。



  • 谢谢你的指导,由于刚刚初学不久,之前接触的都是ES5,ES6一直不太习惯,以后会认真学习ES6的语法,我好像明白了你说的意思了,但是我觉得我还得回去看看资料。