文本輸入

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

<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> 所有的選項(xiàng)都是異步的，所以默認(rèn)情況下它并不表現(xiàn)的像一個(gè)真正的控制組件。就像設(shè)置默認(rèn)值一樣設(shè)置 value 一次，但是你同樣可以根據(jù)onChangeText 不斷的改變它的值。如果你真的想要迫使組件一直都可以恢復(fù)到你設(shè)置的值，那么你可以設(shè)置成controlled={true}。

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

屬性

Edit on GitHub

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

可以通知文本輸入自動(dòng)利用某些字符。

• characters：所有字符，

• words：每一個(gè)單詞的首字母

• sentences：每個(gè)句子的首字母（默認(rèn)情況下）

• none：不會(huì)自動(dòng)使用任何東西

autoCorrect 布爾型

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

autoFocus 布爾型

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

bufferDelay 數(shù)值型

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

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

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

controlled 布爾型

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

editable 布爾型

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

enablesReturnKeyAutomatically 布爾型

如果值為真，當(dāng)沒(méi)有文本的時(shí)候鍵盤(pán)是不能返回鍵值的，當(dāng)有文本的時(shí)候會(huì)自動(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")

決定打開(kāi)哪種鍵盤(pán)，例如，數(shù)字鍵盤(pán)。

multiline 布爾型

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

onBlur 函數(shù)

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

onChange 函數(shù)

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

onChangeText 函數(shù)

onEndEditing 函數(shù)

onFocus 函數(shù)

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

onSubmitEditing 函數(shù)

password 布爾型

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

placeholder 字符串型

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

placeholderTextColor 字符串型

占位符字符串的文本顏色

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

決定返回鍵的樣式

secureTextEntry 布爾型

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

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

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

style Text#style

testID 字符串型

用于端對(duì)端測(cè)試時(shí)定位視圖。

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>
      );
    }
  },
];