- 今天发现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, }, });