前言

手機不是很好打字，如果可以用更簡單的方式搞定就應該盡量避免打字，但很多時候還是必須要讓使用者輸入，例如：回留言、寫筆記、填表單、搜尋，等等，因此還是必須熟悉相關的技巧。

輸入框

我們先依照以往在 React 使用 input 的方式來使用 TextInput：

export default class KeyboardExample extends Component {
  state = {
    text: 'Welcome to React Native!',
  };
  
  handleInputChange = text => {
    this.setState({ text });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          {this.state.text}
        </Text>
        <TextInput
          style={{
            height: 40,
            color: '#FFF',
            borderColor: 'gray',
            backgroundColor: '#000',
            borderWidth: 1,
            padding: 10,
            textAlign: 'center',
          }}
          onChangeText={this.handleInputChange}
          value={this.state.text}
        />
      </View>
    );
  }
}

結果如下圖所示，有一個被控制的輸入框：

如此一來，在電腦的鍵盤就可以直接輸入了。但手機上的鍵盤呢？

手機上的鍵盤

雖然在手機上使用時會直接出現手機鍵盤，但是在模擬器上執行時，預設是使用硬體鍵盤。我們可以在

Hardware > Keyboard > Connect Hardware Keyboard

(或是快捷鍵 Shift + Cmd + K)

把它關掉：

就可以看到模擬器裡面的鍵盤了！

關掉鍵盤

鍵盤打開就會一直在那邊，要是想要在任何時機把它關掉，可以利用 Keyboard.dismiss：

import { Keyboard } from 'react-native';

例如，在 Submit 的時候關掉鍵盤：

<TextInput
  onSubmitEditing={Keyboard.dismiss}
/>

還有另一個常見的使用案例是點擊鍵盤外的地方時關掉鍵盤，可以使用 TouchableWithoutFeedback 包一層來達成：

<TouchableWithoutFeedback
  onPress={Keyboard.dismiss}
>
  <View style={styles.container}>
    <Text style={styles.welcome}>
      {this.state.text}
    </Text>
    <TextInput
      style={{
        height: 40,
        color: '#FFF',
        borderColor: 'gray',
        backgroundColor: '#000',
        borderWidth: 1,
        padding: 10,
        textAlign: 'center',
      }}
      onChangeText={this.handleInputChange}
      onSubmitEditing={Keyboard.dismiss}
      value={this.state.text}
    />
  </View>
</TouchableWithoutFeedback>

事件

Keyboard 本身也是一個 EventEmitter，可以對它監聽 Keyboard 相關事件的發生。

它提供了 JavaScript 開發者都很熟悉的監聽 API：

Keyboard.addListener(eventName, callback)
Keyboard.removeListener(eventName, callback)

支援了以下的事件：

• keyboardWillShow
• keyboardDidShow
• keyboardWillHide
• keyboardDidHide
• keyboardWillChangeFrame
• keyboardDidChangeFrame

KeyboardAvoidingView

多了鍵盤有時候會擋到一些東西，這時候我們必須用 KeyboardAvoidingView 來試著把東西往上推：

<TouchableWithoutFeedback
  onPress={Keyboard.dismiss}
>
  <View style={{ flex: 1 }}>
    <KeyboardAvoidingView 
      behavior="padding" 
      style={styles.container}
    >
      <Text style={styles.welcome}>
        {this.state.text}
      </Text>
      <TextInput
        style={{
          height: 40,
          color: '#FFF',
          borderColor: 'gray',
          backgroundColor: '#000',
          borderWidth: 1,
          padding: 10,
          textAlign: 'center',
        }}
        onChangeText={this.handleInputChange}
        onSubmitEditing={Keyboard.dismiss}
        value={this.state.text}
      />
    </KeyboardAvoidingView>
  </View>
</TouchableWithoutFeedback>

(文字的動畫有點問題，不確定跟模擬器有沒有關係)

behavior 的差別

因為文件寫得不太清楚，最好的方式是直接看原始碼：

• height：把 View 的 height 變小
• position：裡面多一層 View 然後加上 bottom
• padding：在 View 裡面多加 paddingBottom

結語

InputText 跟 Keyboard 的使用可以簡單也可以很複雜，InputText 還有自動修正大小寫的 autoCapitalize、自動修正拼字的 autoCorrect 等等相當多的 Props 可以去設定，要讓使用者能舒服的打字也是一種藝術。