求教ref这个属性的用法



  • <ViewPagerAndroid
        style = { styles.viewPager }
        initialPage = {0}
        onPageScroll = { this.onPageScroll }
        onPageSelected = { this.onPageSelected }
        ref = { viewPager => { this.viewPager = viewPager; } }>
        { pages }
    </ViewPagerAndroid>
    

    然后在其他函数中这样用:

    onSelectMenu(index) {
            if (index != this.state.page) {
                this.viewPager.setPage(index);
                this.setState({ page: index });
            };
        },
    

    提示undefined is not an object( evaluating 'this.viewPager.setPage')
    我这个用法是参考文档的ViewPagerAndroid


  • administrators

    所谓其他函数,是在同一个class中吗?



  • 是的 在同一个class中


  • administrators

    把代码贴完整一点吧



  • var Actionbar = React.createClass({
        getInitialState() {
            return {
                currentPage: this.props.page,
                active: true,
            };
        },
        isActive(menu) {
            return menu == this.state.active;
        },
        onPageSelected(index) {
            this.props.onselect(index);
        },
        render() {
            var TouchableElement = TouchableHighlight;
            if (Platform.OS === 'android') {
                TouchableElement = TouchableNativeFeedback;
            };
            return (
                <View >
                    <View style = { styles.actionbarContainer }>
                            <TouchableElement
                                onPress = { this.onPageSelected(0) }>
                                <View style = { styles.actionItem }>
                                    <View style = { styles.actionIconRow }>
                                        <Image style = { {width: 20, height: 20} }
                                            source = { require('image!actionbar_msg_sel') }/>
                                    </View>
                                    <View style = { styles.actionIconRow }>
                                        <Text style = { [styles.actionText, styles.actionActive]}>
                                            聊天
                                        </Text>
                                    </View>
                                </View>
                            </TouchableElement>
                            <TouchableElement
                                onPress  = { this.onPageSelected(1) }>
                                <View style = { styles.actionItem }>
                                    <View style = { styles.actionIconRow }>
                                        <Image style = { {width: 20, height: 20} }
                                            source = { { uri: 'actionbar_contact'}}/>
                                    </View>
                                    <View style = { styles.actionIconRow }>
                                        <Text style = { [styles.actionText, '']}>
                                            通讯录
                                        </Text>
                                    </View>
                                </View>
                            </TouchableElement>
                            <TouchableElement
                                onPress = { this.onPageSelected(2) }>
                                <View style = { styles.actionItem }>
                                    <View style = { styles.actionIconRow }>
                                        <Image style = { {width: 20, height: 20} }
                                            source = { { uri: 'actionbar_me'} }/>
                                    </View>
                                    <View style = { styles.actionIconRow }>
                                        <Text style = { [styles.actionText,  '']}>
                                            我
                                        </Text>
                                    </View>
                                </View>
                            </TouchableElement>
                    </View>
                </View>
    
            );
        }
    });
    
    var MainActivity = React.createClass({
        getInitialState() {
            return {
                page: 0,
            };
        },
        onPageScroll(e) {
            this.setState({ page: e.nativeEvent.position });
        },
        onPageSelected(e) {
            this.setState({ page: e.nativeEvent.position });
        },
        componentDidMount() {
    
        },
        onSelectMenu(index) {
            if (index != this.state.page) {
                this.viewPager.setPage(index);
                this.setState({ page: index });
            };
        },
        render() {
            var pages = [];
            var pageStyle = {
                padding: 5,
                alignItems: 'center',
            };
            pages.push(
                <Conv key = { 0 } style = { pageStyle } collapsable = { false } />
            );
            pages.push(
                <Contact key = { 1 } style = { pageStyle } collapsable = { false } />
            );
            pages.push(
                <Me key = { 2 } style = { pageStyle } collapsable = { false } />
            );
            var { page } = this.state;
            return (
                <View style = { styles.container }>
                        <ViewPagerAndroid
                            style = { styles.viewPager }
                            initialPage = {0}
                            onPageScroll = { this.onPageScroll }
                            onPageSelected = { this.onPageSelected }
                            ref = { viewPager => { this.viewPager = viewPager; } }>
                            { pages }
                        </ViewPagerAndroid>
                        <Actionbar style = { styles.actionbar }
                            onselect = {this.onSelectMenu}
                            currentPage = { this.state.page }/>
                    </View>
    
            );
        },
    });
    


  • 貌似解决了
    在<TouchableElement>的onPress方法中应该这样写:
    onPress = { () => this.onPageSelected(0) }
    应该是返回函数如果带参数的话应该用箭头函数?



  • @KenChoi 并不是返回函数带参数就应该用箭头函数,

    onPress = { this.onPageSelected(0) } 函数名后面带小括号这样写,会立即调用该函数,并不是把这个函数传递给了onPress,
    onPress = { () => this.onPageSelected(0) } 这样写,实际上你是把如下函数传递给了onPress
    function() {
    this.onPageSelected(0);
    },
    ()=>{}这种写法实际上只是es6中函数的简写。
    所以当你点击时,会调用该函数,该函数又会调用this.onPageSelected(0),所以效果就对了。

    实际上,如果单纯的想传参,可以使用bind函数,
    onPress = { this.onPageSelected.bind(this, 0) }
    这样写一样可以实现效果。



  • @whlpkk 学到了:+1:


登录后回复