关于react native 函数绑定的问题

今天发现justifyContect:space-between,那么在2个空间之间会有间隔，间隔的大小为除去控件占据的大小外，其他的空间

今天遇到个问题，就是我在函数中写this.setState({}),里面居然报我在contruct(props)定义的变量无法访问，报我没有定义，可以明明定义了，弄了一上午，最后百度，说是我的函数没有绑定，就是this._onPress.bind(this),我仅仅写了this._onpress

import React, { Component } from 'react'
import {Platform, StyleSheet, Text, View, Button, Image,TouchableHighlight} from 'react-native'

let count = 0;
export default class N6 extends Component{

    constructor(props){
        super(props);
        this.state=({
            myCount : 0
        });
    }

    render(){
        return(
            <View style={styles.container}>
                <Button title="测试" onPress={this._onPress}/> /*错误，会报myCount没有定义 运行的时候把这个注释去了*/
            <TouchableHighlight
                style={styles.loginButton}
                onPress={this._onPress.bind(this)}>   //正确，不会报myCount没有定义  运行的时候把这个注释去了
                <View style={styles.rowStyle}>
                    <Text style={styles.textLeftStyle}>
                        这是左边数据
                    </Text>
                    <View style={styles.rowRightStyle}>
                        <Text style={styles.textRightStyle}>
                            习近平主席在讲话中指出，中非双方基于相似遭遇和共同使命，在过去的岁月里同心同向、守望相助，走出了一条特色鲜明的合作共赢之路。在这条道路上，中国始终秉持真实亲诚理念和正确义利观，同非洲各国团结一心、同舟共济、携手前进
                        </Text>
                        <View style={styles.rowRightBottomStyle}>
                            <Text style={styles.rowRightBottomTextStyle}>aaaaaaa</Text>
                            <Text style={[styles.rowRightBottomTextStyle]}>bbbbbbb</Text>
                        </View>
                    </View>
                </View>
            </TouchableHighlight>
            </View>
        );
    }

    _onPress(){
       this.setState({
            myCount: this.state.myCount +1
        });
        console.log(this.state.myCount);
        count = count +1;
        console.log("count="+count);
        alert('点击了按钮');

    }
}


const styles = StyleSheet.create({
    container:{
        flex:1,//指定弹性空间1，如果没有其他的那它就会占据整个app,一般container作为主容器也是1
        flexDirection: 'column',//设置主轴是y轴
        justifyContent: 'center',//强调是垂直居中对齐
        alignItems: 'stretch',//设置子空间可以占满整个父空间
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        // margin: 10,
        backgroundColor:'blue'
    },
    rowStyle:{
        flex:1,
        flexDirection: 'row',
        height: 80,
        padding: 2
    },
    textLeftStyle:{
        width:120,
        height: 75,
        marginRight: 10,
        fontSize: 16,
        color:'#000000'
    },
    textRightStyle:{
        // flex:1,//要求占据本行其他部分
        fontSize:20,
        color: '#000000'
    },
    rowRightStyle:{
        flex:1,
        flexDirection:'column'
    },
    rowRightBottomStyle:{
        flexDirection: 'row',
        justifyContent: 'space-between',
        // alignItems: 'flex-end'
    },
    rowRightBottomTextStyle:{
        fontSize:10,
        color:'#777',
        marginTop: 5
    },
    loginButton:{
        backgroundColor:'#1fd094',
        flex:1,
        alignItems:'center',
        borderRadius:8,
    },
});

关于react native 函数绑定的问题

猜你喜欢