iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

使用 Modern Web 技術來打造 Native App系列 第 14

Day 14:編輯的藝術 - TextInput 與 Keyboard

  • 分享至 

  • xImage
  •  

前言

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

輸入框

我們先依照以往在 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 可以去設定,要讓使用者能舒服的打字也是一種藝術。


上一篇
Day 13:Navigation Part II:新的 API - NavigationExperimental
下一篇
Day 15:Networking 直接就上手
系列文
使用 Modern Web 技術來打造 Native App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言