[React Native学习]之Text/TextInput

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