reactjs - tag - react title




在本機中隱藏鍵盤 (17)

使用React Native的 Keyboard.dismiss()

更新的答案

React Native在 Keyboard 上公開了static dismiss() 方法,因此更新的方法是:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

原始答案

使用React Native的 github.com/facebook/react-native/blob/master/Libraries/… 庫。

我有一個非常相似的問題,覺得我是唯一一個沒有解決的問題。

滾動視圖

如果您擁有 ScrollView ,或者繼承自它的任何東西(如 ListView ,則可以添加一個道具,該道具將根據按下或拖動事件自動關閉鍵盤。

道具為 keyboardDismissMode ,其值可以為 noneinteractiveon-drag 。 您可以在 keyboardDismissMode 閱讀更多內容。

常規視圖

如果您擁有除 ScrollView 之外的其他功能,並且希望通過任何按鍵來關閉鍵盤,則可以使用簡單的 TouchableWithoutFeedback 並讓 onPress 使用React Native的實用程序庫 github.com/facebook/react-native/blob/master/Libraries/… 為您關閉鍵盤。

在您的示例中,您可以執行以下操作:

var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.

// Wrap your view with a TouchableWithoutFeedback component like so.

<View style={styles.container}>

  <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>

    <View>

      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>

      <Text style={styles.instructions}>
        To get started, edit index.ios.js
      </Text>

      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>

      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} />

    </View>

  </TouchableWithoutFeedback>

</View>

注意: TouchableWithoutFeedback 只能有一個孩子,因此您需要將其下面的所有內容包裝在一個 View 如上所示。

如果我點擊一個文本輸入,我希望能夠點擊其他地方以便再次關閉鍵盤(雖然不是回車鍵)。 在我閱讀的所有教程和博客文章中,我都沒有找到與此有關的絲毫信息。

在Simulator中使用本機0.4.2時,此基本示例仍不適用於我。 還無法在我的iPhone上嘗試。

<View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to React Native!
    </Text>
    <Text style={styles.instructions}>
      To get started, edit index.ios.js
    </Text>
    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1}}
      onEndEditing={this.clearFocus}
    />
  </View>

使用 ScrollView 而不是 View ,並將 keyboardShouldPersistTaps 屬性設置為false。

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>

ScrollView 使用 keyboardShouldPersistTaps ,您可以傳入“ handled”,它處理了人們所說的使用ScrollView所帶來的問題。 這就是文檔中關於“使用手柄”的說法: the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Here 是引用它的地方。


如何在 TextInput 周圍/旁邊放置可觸摸的組件?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}

如果我沒記錯的話,最新版本的React Native已經解決了這個問題,可以通過點擊來關閉鍵盤。


如果有人需要如何消除多行文本輸入的工作示例,請繼續! 希望這對那裡的人們有所幫助,文檔完全沒有描述消除多行輸入的方法,至少沒有關於如何執行多行輸入的具體參考。 如果有人認為這應該是對本摘要的實際發布的引用,請讓我知道。

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      behavior: 'position',
    }
    this._keyboardDismiss = this._keyboardDismiss.bind(this)
  }

  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove()
  }

  _keyboardDidHide() {
    Keyboard.dismiss()
  }

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={this.state.behavior}
      >
        <TouchableOpacity onPress={this._keyboardDidHide}>
          <View>
            <TextInput
              style={{
                color: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}

您可以從 react-native 導入 keyboard ,如下所示:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

在您的代碼中可能是這樣的:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

靜態dismiss()

關閉活動的鍵盤並移開焦點。


您可以通過多種方式處理此問題,上面的答案不包括 returnType ,因為當時沒有包含在react-native中。

1:您可以通過將組件包裝在ScrollView中來解決此問題,默認情況下,如果我們按某個位置,則ScrollView會關閉鍵盤。 但是如果您想使用ScrollView但禁用此效果。 您可以使用pointerEvent屬性來 pointerEvents = 'none'

2:如果要在按下按鈕時關閉鍵盤,則只能從 react-native 使用 Keyboard

import { Keyboard } from 'react-native' and inside onPress of that button, you can use Keyboard.dismiss()'。

3:您也可以在單擊鍵盤上的回車鍵時關閉鍵盤。注意:如果您的鍵盤類型是數字鍵盤,則沒有回車鍵。 因此,您可以通過為它提供一個屬性returnKeyType到 done 來啟用它。 或者您可以使用 onSubmitEditing={Keyboard.dismiss} ,只要我們按回車鍵,它就會被調用。 如果您想在失去焦點時關閉鍵盤,可以使用onBlur屬性, onBlur = {Keyboard.dismiss}


我是React的新手,在製作演示應用程序時遇到了完全相同的問題。 如果使用 onStartShouldSetResponder 道具( here 介紹),則可以在普通的舊 React.View 上進行觸摸。 好奇地聽到更多有經驗的反應者對這一策略的想法/是否有更好的想法,但這對我有用:

import { Keyboard } from 'react-native';

這裡要注意2件事。 首先,正如 github.com/facebook/react-native/issues/113 所討論的,還沒有一種方法可以結束所有子視圖的編輯,因此我們必須直接引用 TextInput 進行模糊處理。 其次, onStartShouldSetResponder 被其頂部的其他可觸摸控件攔截。 因此,在容器視圖中單擊 TouchableHighlight 等(包括另一個 TextInput )將 不會 觸發該事件。 但是,在容器視圖中單擊“ Image ”仍將關閉鍵盤。


有幾種方法,如果您像 onPress 這樣控制事件,則可以使用:

Keyboard.dismiss(0);

如果要在使用滾動時關閉鍵盤:

Keyboard.dismiss()

當用戶在鍵盤外單擊時,更多選項是:

import { Keyboard } from 'react-native'

簡單的答案是使用ScrollView而不是View並將可滾動屬性設置為false(儘管可能需要調整某些樣式)。

這樣,當我輕按其他位置時,鍵盤就消失了。 這可能是react-native的問題,但是tap事件似乎僅由ScrollViews處理,這導致了所描述的行為。

編輯:感謝jllodra。 請注意,如果您直接點擊另一個Textinput然後在外面,鍵盤仍然不會隱藏。


試用 keyboard.dismiss() 。 對我有用


這是我的鍵盤解散和滾動到輕擊的TextInput的解決方案(我將ScrollView與keyboardDismissMode屬性一起使用):

<ScrollView keyboardDismissMode={'on-drag'}>
     //content
</ScrollView>

用法:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>

首次導入鍵盤

import React from 'react';
import {
  Platform,
  KeyboardAvoidingView,
  ScrollView
} from 'react-native';

const DismissKeyboard = ({ children }) => {
  const isAndroid = Platform.OS === 'android';
  const behavior = isAndroid ? false : 'padding';

  return (
    <KeyboardAvoidingView
      enabled
      behavior={ behavior }
      style={{ flex: 1}}
    >
      <ScrollView
        keyboardShouldPersistTaps={'always'}
        keyboardDismissMode={'on-drag'}
      >
        { children }
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default DismissKeyboard;

然後在 TextInput 內部,將 Keyboard.dismiss 添加到 onSubmitEditing 道具。 您應該具有以下外觀:

render(){
   return(
     <DismissKeyboard>
       <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
     </DismissKeyboard>
   );
}

Keyboard.dismiss() 會做到這一點。 但是有時它可能會失去焦點,並且Keyboard將無法找到參考。 最一致的方法是將 ref=_ref 到textInput上,並在需要關閉時執行 _ref.blur() 在需要帶回鍵盤時執行 _ref.focus()


ScrollViewReact Native 0.39 更新用法

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

雖然,兩個 TextInput 框仍然存在問題。 例如。 現在,在輸入之間切換時,用戶名和密碼形式將關閉鍵盤。 當使用 ScrollView 時在 TextInputs 之間切換時,希望獲得一些建議以使鍵盤保持活動狀態。


const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

方法#2;

感謝用戶@ ricardo-stuven指出了這一點,還有另一種更好的消除鍵盤的方法,您可以在react native文檔的 github.com/facebook/react-native/blob/… 中看到它。

簡單導入 Keyboard 並調用它的方法 dismiss()





react-native