React Native 組件之TextInput


React Native 組件之TextInput類似於iOS中的UITextView或者UITextField,是作為一個文字輸入的組件,下面的TextInput的用法和相關屬性。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停 2016-09-16
 * TextInput 常用屬性
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TextInput,
  View
} from 'react-native';

class Project extends Component {
  render() {
    return (
      <View style={styles.container}>
       <TextInput style={styles.inputStyle} 
         //value={'我是默認的'}     /*該文字無法刪除*/
         keyboardType = {'number-pad'} //彈出鍵盤類型
         multiline = {true}   //多行顯示,默認false:單行顯示
//          password = {true}     //密碼 多行文本不顯示密碼
         placeholder = {'我是占位文字'}  //占位文字
         placeholderTextColor = 'red'  //占位文字顏色
         autoCapitalize = {'characters'} //通知文本輸入自動利用某些字符
         clearButtonMode = {'always'}    //右側的清除模式
         autoCorrect = {false} //禁用自動校正 默認值true開啟自動校正
        // editable = {false} // 是否可編輯 默認為true可編輯
        // retrunKeyType = {'go'} //返回鍵類型
         />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  inputStyle:{
    height:60,
    marginTop:20,
    borderWidth:1,
    borderColor:'black'
  }
});

AppRegistry.registerComponent('Project', () => Project);

  完整源碼下載:https://github.com/pheromone/React-Native-1


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM