Tepki yerelde klavyeyi gizle

Bir metin girişine dokunduğumda, klavyeyi tekrar kapatmak için başka bir yere dokunabilmek istiyorum (yine de dönüş tuşunu değil). Okuduğum tüm derslerde ve blog yazılarında bununla ilgili en ufak bir bilgi bulamadım.

Bu temel örnek benim için Simülatörde tepki yerli 0.4.2 ile hala çalışmıyor. Henüz iPhone'umda deneyemedim.

<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>

Kapatmamanın bir yolu olmadığından, klavyeyi kapatmama sorunu daha şiddetli hale keyboardType='numeric'gelir.

Görünümü ScrollView ile değiştirmek doğru bir çözüm değildir, sanki birden çok textInputs veya s'niz varmış gibi button, klavye varken onlara dokunmak yalnızca klavyeyi kapatır.

Doğru yol, Görünümü TouchableWithoutFeedbackve çağrıyı kapsüllemekKeyboard.dismiss()

DÜZENLEME: Artık kullanabilirsiniz ScrollViewile keyboardShouldPersistTaps='handled'musluk çocuklar tarafından işlenen değilken sadece Klavyeyi kapatmak için (yani diğer textInputs veya düğmelere dokunarak,.)

Eğer varsa

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

Olarak değiştir

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

veya

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

DÜZENLE: Klavyeyi kapatmak için bir Yüksek Sipariş Bileşeni de oluşturabilirsiniz.

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

Sadece böyle kullanın

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

NOT: accessible={false}giriş formunun VoiceOver aracılığıyla erişilebilir olmasını sağlamak için gereklidir. Görme engelli insanlar size teşekkür edecek!

Bu sadece güncellendi ve belgelendi ! Artık gizli numaralar yok.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

https://github.com/facebook/react-native/pull/9925

bunu özel görevden alma için kullan

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})

React Native's kullanın Keyboard.dismiss()

Güncellenmiş Yanıt

React Native, üzerindeki statik dismiss()yöntemi açıkladı Keyboard, bu nedenle güncellenen yöntem:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Orijinal Yanıt

React Native'ın dismissKeyboardKütüphanesini kullanın .

Ben çok benzer bir sorun vardı ve bunu alamadım tek kişi gibi hissettim.

ScrollViews

A ScrollViewveya ondan a gibi bir şey alan bir şey ListViewvarsa, basın veya sürükleme olaylarına göre klavyeyi otomatik olarak kapatan bir destek ekleyebilirsiniz.

Prop , veya keyboardDismissModedeğerine sahip olabilir ve olabilir . Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz .noneinteractiveon-drag

Düzenli Görünümler

Bir başka bir şey varsa ScrollViewve klavyeyi kapatmak için herhangi presleri istiyorum, bir basit kullanabilirsiniz TouchableWithoutFeedbackve sahip onPresskullanımı Anadili 'yarar kütüphanesini Tepki dismissKeyboardsizin için Klavyeyi kapatmak için.

Örneğinizde, böyle bir şey yapabilirsiniz:

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>

Not: TouchableWithoutFeedbacksadece tek bir çocuğunuz olabilir, bu nedenle altındaki her şeyi Viewyukarıda gösterildiği gibi tek bir pakete sarmanız gerekir .

Basit yanıt Görünüm yerine bir ScrollView kullanmak ve kaydırılabilir özelliğini false olarak ayarlamaktır (yine de bazı stilleri ayarlamanız gerekebilir).

Bu şekilde, başka bir yere dokunduğumda klavye işten çıkartılır. Bu, yerel tepki ile ilgili bir sorun olabilir, ancak hafifçe vurma etkinlikleri yalnızca açıklanan davranışa yol açan ScrollViews ile işlenmiş gibi görünür.

Düzenleme: Teşekkürler jllodra. Doğrudan başka bir Textinput öğesine ve ardından dışarıya dokunursanız, klavyenin hala gizlenmeyeceğini lütfen unutmayın.

Sen edebilirsiniz içe keyboard gelen tepki yerli aşağıda gibi:

import { Keyboard } from 'react-native';

ve kodunuzda şöyle bir şey olabilir:

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

statik reddetme ()

Etkin klavyeyi kapatır ve odağı kaldırır.

React'te yeniyim ve bir demo uygulaması yaparken aynı sorunla karşılaştım. Eğer kullanırsanız onStartShouldSetResponder(anlatılan pervane burada ), bir düz eski üzerinde dokunuşları yakalayabilir React.View. Daha deneyimli Tepkilerin bu strateji hakkındaki düşüncelerini duyma meraklı / daha iyisi varsa, ama bu benim için işe yaradı:

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

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

Burada dikkat edilmesi gereken 2 şey var. İlk olarak, burada tartışıldığı gibi , tüm alt görünümlerin düzenlenmesine son vermenin bir yolu henüz yoktur, bu yüzden TextInputdoğrudan bulanıklaştırmak için doğrudan başvurmalıyız . İkincisi, üstündeki onStartShouldSetResponderdiğer dokunmatik kontroller tarafından durdurulur. Bir tıklayarak Yani TouchableHighlightvb (başka dahil TextInputkonteyner görünümünde) olacak değil olayı tetikler. Ancak, Imagekapsayıcı görünümünün içindeki bir tuşa tıklamak yine de klavyeyi kapatır.

ScrollViewBunun yerine kullanın Viewve keyboardShouldPersistTapsniteliği false olarak ayarlayın.

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

Herhangi biri çok satırlı bir metin girişini nasıl kapatmak için çalışan bir örnek gerekirse burada! Umarım bu bazı insanlar yardımcı olur, dokümanlar çok satırlı bir girişi yok saymanın bir yolunu tanımlamaz, en azından nasıl yapılacağı konusunda belirli bir referans yoktu. Hala burada yığına gönderme bir noob, kimse bunun gerçek pasaj referans olması gerektiğini düşünüyorsa bu snippet bana bildirin için yazılmıştır.

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>
    )
  }
}

Güncellenmiş kullanım ScrollViewiçinReact Native 0.39

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

Yine de, iki TextInputkutu ile ilgili bir sorun var . Örneğin. Bir kullanıcı adı ve şifre formu artık girişler arasında geçiş yaparken klavyeyi kapatır. A kullanırken geçiş TextInputsyaparken klavyeyi canlı tutmak için bazı öneriler almak isterim ScrollView.

Kullanabileceğiniz gibi etkinliği kontrol ediyorsanız birkaç yol vardır onPress:

import { Keyboard } from 'react-native'

onClickFunction = () => {
     Keyboard.dismiss()
}

kullanım kaydırma sırasında klavyeyi kapatmak istiyorsanız:

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

Daha fazla seçenek, kullanıcı klavyenin dışını tıkladığında:

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

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

Yaklaşım No # 2;

Bunu işaret ettiği için user @ ricardo-stuven sayesinde, örnekte görebileceğiniz klavyeyi kapatmanın daha iyi bir yolu daha var yerel yerel dokümanlarda .

Basit içe aktarma Keyboardve çağrı yöntemidismiss()

Bileşenlerinizi bir pakete sarmak, TouchableWithoutFeedbackbazı garip kaydırma davranışlarına ve diğer sorunlara neden olabilir. Ben benim en üstteki app sarmak için tercih Viewile onStartShouldSetResponderdoldurulmuş özelliği. Bu bana tüm işlenmeyen dokunuşlar işlemek ve sonra Klavyeyi kapatmak sağlayacaktır. Önemlisi, işleyici işlevi yanlış döndürdüğünden, dokunma olayı normal gibi yayılır.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }

Bunu en son React Native sürümünü (0.4.2) kullanarak test ettim ve başka bir yere dokunduğunuzda klavye kapatıldı.

Ve FYI: klavyeyi kapattığınızda "onEndEditing" propine atayarak yürütülecek bir geri arama işlevi ayarlayabilirsiniz.

Yanılmıyorsam React Native'ın son sürümü, klavyeyi vurarak işten çıkarabilme sorununu çözdü.

Dokunulabilir bir parçanın yanına / yanına yerleştirmeye ne dersiniz 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>
        )
    }
}

Tüm bileşeninizi aşağıdakilerle sarın:

import { TouchableWithoutFeedback, Keyboard } from 'react-native'

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

Benim için çalıştı

https://facebook.github.io/react-native/docs/keyboard.html

kullanım

Keyboard.dismiss(0);

klavyeyi gizlemek için.

Klavye modülü, klavye olaylarını kontrol etmek için kullanılır.

• import { Keyboard } from 'react-native'

• Render yönteminde aşağıdaki kodu ekleyin.

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

Kullanabilirsiniz -

Keyboard.dismiss()

static dismiss () Etkin klavyeyi kapatır ve yerel belgelere tepki olarak odağı kaldırır.

İlk içe aktarma klavyesi

import { Keyboard } from 'react-native'

Sonra gözündeki TextInputeklemek Keyboard.dismissiçin onSubmitEditingpervane. Şöyle bir şey olmalı:

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}

Kullanılması keyboardShouldPersistTapshalinde ScrollViewkonuyla ilgileniyor insanlar diyor ki, hangi "ele" geçirebilirsiniz size scrollview kullanarak gelir. Belgelerin 'handled' kullanımıyla ilgili söylediği şey: the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Burada referans gösterilmektedir.

içinde ScrollViewkullanılmak

keyboardShouldPersistTaps="handled" 

Bu işinizi yapacak.

Bunu halletmenin birçok yolu vardır, yukarıdaki cevaplar dahil değildir returnType o zamanki tepki yereline dahil .

1: Bileşenlerinizi ScrollView içine sararak çözebilirsiniz, varsayılan olarak bir yere basarsak ScrollView klavyeyi kapatır. Ancak ScrollView kullanmak istiyorsanız, ancak bu efekti devre dışı bırakın. kaydırma görünümü için pointerEvent prop kullanabilirsiniz pointerEvents = 'none' .

2: Bir düğmeye basarak klavyeyi kapatmak istiyorsanız Keyboard,react-native

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

3: Klavyedeki dönüş tuşunu tıklattığınızda klavyeyi de kapatabilirsiniz, NOT: klavye türünüz sayısalsa, bir dönüş tuşunuz olmaz. Böylece, bir prop, returnKeyType öğesine vererek etkinleştirebilirsiniz done. ya da kullanabilirsiniz onSubmitEditing={Keyboard.dismiss}, dönüş tuşuna her bastığımızda çağrılır. Odağı kaybederken klavyeyi kapatmak istiyorsanız, onBlur prop,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()yapacağım. Ancak bazen odağı kaybedebilir ve Klavye ref'yi bulamaz. Bunu yapmanın en tutarlı yolu ref=_ref, textInput öğesine a koymak ve kapatmanız gerektiğinde ve klavyeyi geri getirmeniz _ref.blur()gerektiğinde yapmaktır _ref.focus().

deneyin keyboard.dismiss(). Benim için çalıştı

İşte benim kestirilmiş TextInput klavye kaydırma ve kaydırma için benim çözüm (keyboardDismissMode prop ile ScrollView kullanıyorum):

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;

kullanımı:

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

bu paketi kullan react-native-keyboard-aware-scroll-view

bu bileşeni kök bileşeniniz olarak kullanın

Bu pakette react-native-keyboard-aware-scroll-viewayrıca bir scrollView olduğundan, buna eklemeniz gerekir:

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>