//居中
alignItems:'center',
justifyContent:'center'
組件的引用
定義組件的引用
通過某個組件的JSX代碼描述中加入ref={字符串},就可以定義一個組件的引用名稱
<TextInput ref='aReferName'
.....
/>
所以當(dāng)我們使用的時候弦追，就可以調(diào)用this.refs.aReferName得到這個組件的引用革答。
重新設(shè)定組件的屬性
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
Text,
View,
Image,
} from 'react-native';
export default class Project21 extends Component {
//構(gòu)造
constructor(props){
super(props);
//初始狀態(tài)
this.state = {
textInputValue:''
};
this.buttonPressed = this.buttonPressed.bind(this);
}
//當(dāng)按鈕按下的時候執(zhí)行此函數(shù)
buttonPressed(){
let textInputValue = 'new value';
this.setState({textInputValue});
//調(diào)用組件的公開函數(shù)貌虾，修改文本輸入框的屬性值
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成員函數(shù)供炎，調(diào)用它可以得到組價當(dāng)前的寬工闺、高與位置信息
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View,
} from 'react-native';
export default class Project21 extends Component {
constructor(props){
super(props);
//初始狀態(tài)
this.state={};
this.tempfunc = this.tempfunc.bind(this);
this.getTextInputPosition = this.getTextInputPosition.bind(this);
}
//在頁面被渲染之前執(zhí)行
componentDidMount(){
var aref = this.tempfunc;
window.setTimeout(aref, 1); //在compoinentDidMount執(zhí)行完后才可以獲取位置
//因此指定一個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);
跨平臺狀態(tài)欄組件
- animated是布爾類型的屬性效拭，用來設(shè)定狀態(tài)欄的背景色暂吉、樣式和隱現(xiàn)被改變時，是否需要東阿虎效果缎患。他的默認(rèn)值是false
- hidden是布爾類型的屬性慕的，用來設(shè)定狀態(tài)欄是否隱藏
Android特有屬性
- backgroundColor
- Android設(shè)備上狀態(tài)欄的背景顏色
- translucent
- 布爾類型,狀態(tài)欄是否半透明,如果為true,應(yīng)用將從物理頂端開始顯示
render() {
return (
<View style={{flex:1, backgroudColor: 'white', borderWidth:1 }}>
<StatusBar
animated={true}
hidden={false}
backgroundColor={'grey'}
translucent={true}
barStyle={'default'}
//fade', 'slide'二選一，通過hidden屬性來顯示或隱藏狀態(tài)欄時所使用的動畫效果挤渔。默認(rèn)值為'fade'肮街。
showHideTransition={'fade'}
networkActivityIndicatorVisible={true}/>
</View>
);
}
高度自增長的擴(kuò)展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>
);
}
}
