通過鍵盤將文本輸入到應(yīng)用程序的一個基本的組件。屬性提供幾個功能的可配置性，比如自動校正，自動還原，占位符文本，和不同的鍵盤類型，如數(shù)字鍵盤。 最簡單的一個用例是放置一個 TextInput，利用 onChangeText 事件來讀取用戶的輸入。還有其他的事件可以使用，比如onSubmitEditing 和 onFocus。一個簡單的例子：

<View>
  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({input: text})}
  />
  <Text>{'user input: ' + this.state.input}</Text>
</View>

value 屬性可以用于設(shè)置輸入的值，其目的是讓組件的狀態(tài)更清晰，但是<TextInput> 所有的選項都是異步的，所以默認(rèn)情況下它并不表現(xiàn)的像一個真正的控制組件。就像設(shè)置默認(rèn)值一樣設(shè)置 value 一次，但是你同樣可以根據(jù) onChangeText 不斷的改變它的值。如果你真的想要迫使組件一直都可以恢復(fù)到你設(shè)置的值，那么你可以設(shè)置成 controlled={true}。

不是所有版本都支持 multiline 屬性，然后有些屬性只支持多行輸入。

屬性

Edit on GitHub

autoCapitalize enum('none', 'sentences', 'words', 'characters')

可以通知文本輸入自動利用某些字符。

• characters：所有字符，
• words：每一個單詞的首字母
• sentences：每個句子的首字母（默認(rèn)情況下）
• none：不會自動使用任何東西

autoCorrect 布爾型

如果值為假，禁用自動校正。默認(rèn)值為真。

autoFocus 布爾型

如果值為真，聚焦 componentDidMount 上的文本。默認(rèn)值為假。

bufferDelay 數(shù)值型

這個會幫助避免由于 JS 和原生文本輸入之間的競態(tài)條件而丟失字符。默認(rèn)值應(yīng)該是沒問題的，但是如果你每一個按鍵都操作的非常緩慢，那么你可能想嘗試增加這個。

clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')

清除按鈕出現(xiàn)在文本視圖右側(cè)的時機

controlled 布爾型

如果你真想要它表現(xiàn)成一個控制組件，你可以將它的值設(shè)置為真，但是按下按鍵，并且/或者緩慢打字，你可能會看到它閃爍，這取決于你如何處理 onChange 事件。

editable 布爾型

如果值為假，文本是不可編輯的。默認(rèn)值為真。

enablesReturnKeyAutomatically 布爾型

如果值為真，當(dāng)沒有文本的時候鍵盤是不能返回鍵值的，當(dāng)有文本的時候會自動返回。默認(rèn)值為假。

keyboardType enum('default', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter', 'web-search', "numeric")

決定打開哪種鍵盤，例如，數(shù)字鍵盤。

multiline 布爾型

如果值為真，文本輸入可以輸入多行。默認(rèn)值為假。

onBlur 函數(shù)

當(dāng)文本輸入是模糊的，調(diào)用回調(diào)函數(shù)

onChange 函數(shù)

當(dāng)文本輸入的文本發(fā)生變化時，調(diào)用回調(diào)函數(shù)

onChangeText 函數(shù)

onEndEditing 函數(shù)

onFocus 函數(shù)

當(dāng)輸入的文本是聚焦?fàn)顟B(tài)時，調(diào)用回調(diào)函數(shù)

onSubmitEditing 函數(shù)

password 布爾型

如果值為真，文本輸入框就成為一個密碼區(qū)域。默認(rèn)值為假。

placeholder 字符串型

在文本輸入之前字符串將被呈現(xiàn)出來

placeholderTextColor 字符串型

占位符字符串的文本顏色

returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')

決定返回鍵的樣式

secureTextEntry 布爾型

如果值為真，文本輸入框就會使輸入的文本變得模糊，以便于像密碼這樣敏感的文本保持安全。默認(rèn)值為假。

selectionState 文檔選擇狀態(tài)

見 DocumentSelectionState.js，一些狀態(tài)是為了維護一個文檔的選擇信息。

style Text#style

testID 字符串型

用于端對端測試時定位視圖。

value 字符串型

文本輸入的默認(rèn)值

例子

Edit on GitHub

'use strict';
var React = require('react-native');
var {
  Text,
  TextInput,
  View,
  StyleSheet,
} = React;
var WithLabel = React.createClass({
  render: function() {
    return (
      <View style={styles.labelContainer}>
        <View style={styles.label}>
          <Text>{this.props.label}</Text>
        </View>
        {this.props.children}
      </View>
    );
  }
});
var TextEventsExample = React.createClass({
  getInitialState: function() {
    return {
      curText: '<No Event>',
      prevText: '<No Event>',
    };
  },
  updateText: function(text) {
    this.setState({
      curText: text,
      prevText: this.state.curText,
    });
  },
  render: function() {
    return (
      <View>
        <TextInput
          autoCapitalize="none"
          placeholder="Enter text to see events"
          autoCorrect={false}
          onFocus={() => this.updateText('onFocus')}
          onBlur={() => this.updateText('onBlur')}
          onChange={(event) => this.updateText(
            'onChange text: ' + event.nativeEvent.text
          )}
          onEndEditing={(event) => this.updateText(
            'onEndEditing text: ' + event.nativeEvent.text
          )}
          onSubmitEditing={(event) => this.updateText(
            'onSubmitEditing text: ' + event.nativeEvent.text
          )}
          style={styles.default}
        />
        <Text style={styles.eventLabel}>
          {this.state.curText}{'\n'}
          (prev: {this.state.prevText})
        </Text>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  page: {
    paddingBottom: 300,
  },
  default: {
    height: 26,
    borderWidth: 0.5,
    borderColor: '#0f0f0f',
    padding: 4,
    flex: 1,
    fontSize: 13,
  },
  multiline: {
    borderWidth: 0.5,
    borderColor: '#0f0f0f',
    flex: 1,
    fontSize: 13,
    height: 50,
  },
  eventLabel: {
    margin: 3,
    fontSize: 12,
  },
  labelContainer: {
    flexDirection: 'row',
    marginVertical: 2,
    flex: 1,
  },
  label: {
    width: 80,
    justifyContent: 'flex-end',
    flexDirection: 'row',
    marginRight: 10,
    paddingTop: 2,
  },
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.examples = [
  {
    title: 'Auto-focus',
    render: function() {
      return <TextInput autoFocus={true} style={styles.default} />;
    }
  },
  {
    title: 'Auto-capitalize',
    render: function() {
      return (
        <View>
          <WithLabel label="none">
            <TextInput
              autoCapitalize="none"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="sentences">
            <TextInput
              autoCapitalize="sentences"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="words">
            <TextInput
              autoCapitalize="words"
              style={styles.default}
            />
          </WithLabel>
          <WithLabel label="characters">
            <TextInput
              autoCapitalize="characters"
              style={styles.default}
            />
          </WithLabel>
        </View>
      );
    }
  },
  {
    title: 'Auto-correct',
    render: function() {
      return (
        <View>
          <WithLabel label="true">
            <TextInput autoCorrect={true} style={styles.default} />
          </WithLabel>
          <WithLabel label="false">
            <TextInput autoCorrect={false} style={styles.default} />
          </WithLabel>
        </View>
      );
    }
  },
  {
    title: 'Keyboard types',
    render: function() {
      var keyboardTypes = [
        'default',
        'ascii-capable',
        'numbers-and-punctuation',
        'url',
        'number-pad',
        'phone-pad',
        'name-phone-pad',
        'email-address',
        'decimal-pad',
        'twitter',
        'web-search',
        'numeric',
      ];
      var examples = keyboardTypes.map((type) => {
        return (
          <WithLabel key={type} label={type}>
            <TextInput
              keyboardType={type}
              style={styles.default}
            />
          </WithLabel>
        );
      });
      return <View>{examples}</View>;
    }
  },
  {
    title: 'Return key types',
    render: function() {
      var returnKeyTypes = [
        'default',
        'go',
        'google',
        'join',
        'next',
        'route',
        'search',
        'send',
        'yahoo',
        'done',
        'emergency-call',
      ];
      var examples = returnKeyTypes.map((type) => {
        return (
          <WithLabel key={type} label={type}>
            <TextInput
              returnKeyType={type}
              style={styles.default}
            />
          </WithLabel>
        );
      });
      return <View>{examples}</View>;
    }
  },
  {
    title: 'Enable return key automatically',
    render: function() {
      return (
        <View>
          <WithLabel label="true">
            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
          </WithLabel>
        </View>
      );
    }
  },
  {
    title: 'Secure text entry',
    render: function() {
      return (
        <View>
          <WithLabel label="true">
            <TextInput secureTextEntry={true} style={styles.default} value="abc" />
          </WithLabel>
        </View>
      );
    }
  },
  {
    title: 'Event handling',
    render: function(): ReactElement { return <TextEventsExample /> },
  },
  {
    title: 'Colored input text',
    render: function() {
      return (
        <View>
          <TextInput
            style={[styles.default, {color: 'blue'}]}
            value="Blue"
          />
          <TextInput
            style={[styles.default, {color: 'green'}]}
            value="Green"
          />
        </View>
      );
    }
  },
  {
    title: 'Clear button mode',
    render: function () {
      return (
        <View>
          <WithLabel label="never">
            <TextInput
              style={styles.default}
              clearButtonMode="never"
            />
          </WithLabel>
          <WithLabel label="while editing">
            <TextInput
              style={styles.default}
              clearButtonMode="while-editing"
            />
          </WithLabel>
          <WithLabel label="unless editing">
            <TextInput
              style={styles.default}
              clearButtonMode="unless-editing"
            />
          </WithLabel>
          <WithLabel label="always">
            <TextInput
              style={styles.default}
              clearButtonMode="always"
            />
          </WithLabel>
        </View>
      );
    }
  },
];