//居中
 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>
    );
  }

高度自增長的擴展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>
    );
  }
}