//居中
alignItems:'center',
justifyContent:'center'
组件的引用
定义组件的引用
通过某个组件的JSX代码描述中加入ref={字符串},就可以定义一个组件的引用名称
<TextInput ref='aReferName'
.....
/>
所以当我们使用的时候，就可以调用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 (
<View style={styles.container}>
<Text style={styles.buttonStyle}
onPress={this.buttonPressed}>
Press me genterly
</Text>
<Text style={styles.textPromptStyle}
ref={'text2'}> //指定本组名的引用名
文字提示
</Text>
<View>
<TextInput style={styles.textInputStyle}
ref={'textInputRefer'}
value={this.state.textInputValue}
onChageText={(textInputValue)=> this.setState({textInputValue})}/>
</View>
</View>
);
}
}
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 (
<View style={styles.container}>
<View style={{borderWidth:1}}>
<TextInput style={styles.textInputStyle}
ref='aTextInputRef'
defaultValue='Ajfg 你好'
underlineColorAndroid='white'
/>
</View>
</View>
);
}
}
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 (
<View style={{flex:1, backgroudColor: 'white', borderWidth:1 }}>
<StatusBar
animated={true}
hidden={false}
backgroundColor={'grey'}
translucent={true}
barStyle={'default'}
//fade', 'slide'二选一，通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'。
showHideTransition={'fade'}
networkActivityIndicatorVisible={true}/>
</View>
);
}
高度自增长的扩展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 (
<TextInput {...this.props} //将自定义的组件交给了TextInput
multiline={true}
onChange={this._onChange}
style={[styles.textInputStyle, {height: Math.max(35, this.state.height)}]}
value={this.state.text}/>
);
}
}
class Project21 extends Component {
_onChangeText(newText){
console.log('inputed text:' + newText);
}
render() {
return (
<View style = {styles.container}>
<AutoExpandingTextInput style={styles.textInputStyle}
onChangeText={this._onChangeText}/>
</View>
);
}
}
网友评论