//居中
alignItems:'center',
justifyContent:'center'
组件的引用
定义组件的引用
通过某个组件的JSX代码描述中加入ref={字符串},就可以定义一个组件的引用名称
所以当我们使用的时候，就可以调用this.refs.aReferName得到这个组件的引用。
重新设定组件的属性
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
Text,
View,
Image,
} from 'react-native';
export default class Project21 extends Component {
//构造
constructor(props){
super(props);
//初始状态
this.state = {
textInputValue:''
};
this.buttonPressed = this.buttonPressed.bind(this);
}
//当按钮按下的时候执行此函数
buttonPressed(){
let textInputValue = 'new value';
this.setState({textInputValue});
//调用组件的公开函数，修改文本输入框的属性值
this.refs.textInputRefer.setNativeProps({
editable:false
});
//通过指向Text组件的引用
this.refs.text2.setNativeProps({
style:{
color: 'blue',
fontSize:30
}
});
}
render() {
return (
Press me genterly
//指定本组名的引用名
文字提示
this.setState({textInputValue})}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white'
},
buttonStyle:{ //文本组件样式，使用该文本组件作为简单的按钮
fontSize:20,
backgroundColor:'grey'
},
textPromptStyle:{
fontSize:20
},
textInputStyle:{
width:150,
height:50,
fontSize:20,
backgroundColor:'grey'
}
});
AppRegistry.registerComponent('Project21', () => Project21);
获取组件的位置
每一个React Native组件都有一个measure成员函数，调用它可以得到组价当前的宽、高与位置信息
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View,
} from 'react-native';
export default class Project21 extends Component {
constructor(props){
super(props);
//初始状态
this.state={};
this.tempfunc = this.tempfunc.bind(this);
this.getTextInputPosition = this.getTextInputPosition.bind(this);
}
//在页面被渲染之前执行
componentDidMount(){
var aref = this.tempfunc;
window.setTimeout(aref, 1); //在compoinentDidMount执行完后才可以获取位置
//因此指定一个1毫秒后超时的定时器
}
tempfunc(){
this.refs.aTextInputRef.measure(this.getTextInputPosition); //获取位置
}
getTextInputPosition(fx, fy, width, height, px, py){
console.log('getPosition');
console.log("width:" + width); //控件宽
console.log("height:" + height);//控件高
console.log("fx:" + fx); //距离父控件左端 x的偏移量
console.log("fy:" + fy); //距离父控件上端 y的偏移量
console.log("px:" + px); //距离屏幕左端 x的偏移量
console.log("py:" + py); //距离屏幕上端 y的偏移量
}
render() {
return (
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white'
},
buttonStyle:{ //文本组件样式，使用该文本组件作为简单的按钮
fontSize:20,
backgroundColor:'grey'
},
textPromptStyle:{
fontSize:20
},
textInputStyle:{
width:200,
height:55,
fontSize:50,
alignItems: 'center',
justifyContent: 'center',
paddingTop:0,
paddingBottom: 0
}
});
AppRegistry.registerComponent('Project21', () => Project21);
跨平台状态栏组件
- animated是布尔类型的属性，用来设定状态栏的背景色、样式和隐现被改变时，是否需要东阿虎效果。他的默认值是false
- hidden是布尔类型的属性，用来设定状态栏是否隐藏
Android特有属性
- backgroundColor
- Android设备上状态栏的背景颜色
- translucent
- 布尔类型,状态栏是否半透明,如果为true,应用将从物理顶端开始显示
render() {
return (
);
}
高度自增长的扩展TextInput组件
export default class AutoExpandingTextInput extends Component {
constructor(props){
super(props);
this.state={text:'',height:0};
this._onChange=this._onChange.bind(this);
}
_onChange(event){
this.setState({
text:event.nativeEvent.text,
height:event.nativeEvent.contentSize.height
});
}
render() {
//multiline：是否能-显示多行
return (
);
}
}
class Project21 extends Component {
_onChangeText(newText){
console.log('inputed text:' + newText);
}
render() {
return (
);
}
}