求教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



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



  • 是的 在同一个class中



  • 把代码贴完整一点吧



  • 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: