Sembunyikan keyboard di reaksi-asli

Jika saya mengetuk masukan teks, saya ingin dapat mengetuk tempat lain untuk menghilangkan keyboard lagi (bukan tombol kembali). Saya belum menemukan sedikit pun informasi mengenai hal ini di semua tutorial dan posting blog yang saya baca.

Contoh dasar ini masih tidak berfungsi untuk saya dengan react-asli 0.4.2 di Simulator. Belum dapat mencobanya di iPhone saya.

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

Masalah dengan keyboard tidak menolak semakin parah jika Anda miliki keyboardType='numeric', karena tidak ada cara untuk mengabaikannya.

Mengganti Tampilan dengan ScrollView bukan solusi yang benar, seolah-olah Anda memiliki beberapa textInputs atau buttons, mengetuknya saat keyboard menyala hanya akan mengabaikan keyboard.

Cara yang benar adalah dengan merangkum View with TouchableWithoutFeedbackdan callingKeyboard.dismiss()

EDIT: Sekarang Anda dapat menggunakan ScrollViewdengan keyboardShouldPersistTaps='handled'hanya mengabaikan keyboard ketika ketukan tidak ditangani oleh anak-anak (mis. Mengetuk Input teks atau tombol lainnya)

Jika Anda memiliki

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

Ubah ke

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

atau

import {Keyboard} from 'react-native'

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

EDIT: Anda juga dapat membuat Komponen Tingkat Tinggi untuk mengabaikan keyboard.

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)

Cukup gunakan seperti ini

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

CATATAN: accessible={false}diperlukan untuk membuat formulir input terus dapat diakses melalui VoiceOver. Orang tunanetra akan berterima kasih!

Ini baru saja diperbarui dan didokumentasikan ! Tidak ada lagi trik tersembunyi.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

gunakan ini untuk pemberhentian khusus

var dismissKeyboard = require('dismissKeyboard');

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

Gunakan Bereaksi Asli Keyboard.dismiss()

Jawaban yang Diperbarui

Bereaksi Asli memaparkan dismiss()metode statis pada Keyboard, jadi metode yang diperbarui adalah:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Jawaban Asli

Gunakan Bereaksi Asli dismissKeyboard Library.

Saya memiliki masalah yang sangat mirip dan merasa seperti saya adalah satu-satunya yang tidak mendapatkannya.

ScrollViews

Jika Anda memiliki ScrollView, atau apa pun yang mewarisi dari itu seperti ListView, Anda dapat menambahkan prop yang akan secara otomatis mengabaikan keyboard berdasarkan pers atau peristiwa menyeret.

Prop adalah keyboardDismissModedan dapat memiliki nilai none, interactiveatau on-drag. Anda dapat membaca lebih lanjut tentang itu di sini .

Tampilan Biasa

Jika Anda memiliki sesuatu selain dari ScrollViewdan Anda ingin menekan untuk menghilangkan keyboard, Anda dapat menggunakan yang sederhana TouchableWithoutFeedbackdan onPressmenggunakan perpustakaan utilitas React Native dismissKeyboarduntuk mengabaikan keyboard untuk Anda.

Dalam contoh Anda, Anda dapat melakukan sesuatu seperti ini:

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>

Catatan: TouchableWithoutFeedbackhanya dapat memiliki satu anak sehingga Anda harus membungkus semuanya di bawah ini dalam satu Viewseperti yang ditunjukkan di atas.

Jawaban sederhananya adalah menggunakan ScrollView daripada View dan atur properti scrollable ke false (mungkin perlu menyesuaikan beberapa style).

Dengan cara ini, keyboard akan hilang saat saya mengetuk di tempat lain. Ini mungkin merupakan masalah dengan reaksi asli, tetapi acara tap sepertinya hanya ditangani dengan ScrollViews yang mengarah pada perilaku yang dijelaskan.

Sunting: Terima kasih kepada jllodra. Harap dicatat bahwa jika Anda mengetuk langsung ke Textinput lain dan kemudian di luar, keyboard tetap tidak akan bersembunyi.

Anda dapat mengimpor keyboard dari yang asli reaksi seperti di bawah ini:

import { Keyboard } from 'react-native';

dan dalam kode Anda bisa jadi seperti ini:

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

pemberhentian statis ()

Menonaktifkan keyboard aktif dan menghapus fokus.

Saya masih baru dalam Bereaksi, dan mengalami masalah yang sama persis saat membuat aplikasi demo. Jika Anda menggunakan onStartShouldSetResponderpenyangga (dijelaskan di sini ), Anda bisa menyentuh sentuhan lama React.View. Penasaran ingin mendengar pemikiran React-ers yang lebih berpengalaman tentang strategi ini / jika ada yang lebih baik, tetapi inilah yang berhasil bagi saya:

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

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

2 hal yang perlu diperhatikan di sini. Pertama, seperti yang dibahas di sini , belum ada cara untuk mengakhiri pengeditan semua subview, jadi kita harus merujuk TextInputlangsung untuk mengaburkannya. Kedua, onStartShouldSetResponderdicegat oleh kontrol terjamah lainnya di atasnya. Jadi mengklik TouchableHighlightdll (termasuk yang lain TextInput) dalam tampilan wadah tidak akan memicu acara tersebut. Namun, mengklik pada Imagetampilan kontainer masih akan mengabaikan keyboard.

Gunakan ScrollViewalih-alih Viewdan atur keyboardShouldPersistTapsatribut ke false.

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

Jika ada yang membutuhkan contoh yang berfungsi tentang cara mengabaikan input teks multiline di sini ya pergi! Semoga ini bisa membantu beberapa orang di luar sana, dokumen tidak menjelaskan cara untuk mengabaikan input multiline sama sekali, setidaknya tidak ada referensi khusus tentang cara melakukannya. Masih noob untuk benar-benar memposting di sini di stack, jika ada yang berpikir ini harus menjadi referensi ke posting yang sebenarnya cuplikan ini ditulis untuk memberi tahu saya.

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

Penggunaan diperbarui ScrollViewuntukReact Native 0.39

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

Meskipun, masih ada masalah dengan dua TextInputkotak. misalnya. Formulir nama pengguna dan kata sandi sekarang akan mengabaikan keyboard saat beralih antar input. Ingin mendapatkan beberapa saran agar keyboard tetap hidup saat beralih di antara TextInputssaat menggunakan a ScrollView.

Ada beberapa cara, jika Anda mengontrol acara seperti onPressyang dapat Anda gunakan:

import { Keyboard } from 'react-native'

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

jika Anda ingin menutup keyboard saat menggunakan scrolling:

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

Opsi lainnya adalah ketika pengguna mengklik di luar keyboard:

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

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

Pendekatan No # 2;

Berkat pengguna @ ricardo-stuven untuk menunjukkan ini, ada cara lain yang lebih baik untuk mengabaikan keyboard yang dapat Anda lihat pada contoh di dokumen asli reaksi.

Impor sederhana Keyboarddan panggil metode itudismiss()

Membungkus komponen Anda dalam TouchableWithoutFeedbackdapat menyebabkan beberapa perilaku gulir aneh dan masalah lainnya. Saya lebih suka untuk membungkus aplikasi saya yang paling atas Viewdengan onStartShouldSetResponderproperti yang diisi. Ini memungkinkan saya untuk menangani semua sentuhan yang tidak tertangani dan kemudian mengabaikan keyboard. Yang penting, karena fungsi handler mengembalikan false, acara sentuh disebarkan seperti biasa.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Saya baru saja mengujinya menggunakan versi React Native terbaru (0.4.2), dan keyboardnya dihapus ketika Anda mengetuk di tempat lain.

Dan FYI: Anda dapat mengatur fungsi panggilan balik yang akan dieksekusi ketika Anda mengabaikan keyboard dengan menetapkannya ke prop "onEndEditing".

Jika saya tidak salah, versi terbaru dari React Native telah menyelesaikan masalah ini karena dapat mengabaikan keyboard dengan mengetuk.

Bagaimana dengan menempatkan komponen yang dapat disentuh di sekitar / di samping 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>
        )
    }
}

Bungkus seluruh komponen Anda dengan:

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

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

Bekerja untukku

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

Menggunakan

Keyboard.dismiss(0);

untuk menyembunyikan keyboard.

Modul keyboard digunakan untuk mengontrol acara keyboard.

• import { Keyboard } from 'react-native'

• Tambahkan kode di bawah ini dalam metode render.

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

Kamu bisa menggunakan -

Keyboard.dismiss()

static dismiss () Membubarkan keyboard aktif dan menghapus fokus sesuai reaksi dokumen asli.

Impor Keyboard pertama

import { Keyboard } from 'react-native'

Kemudian di dalam Anda, TextInputAnda menambahkan Keyboard.dismisske onSubmitEditingprop. Anda harus memiliki sesuatu yang terlihat seperti ini:

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

Menggunakan keyboardShouldPersistTapsdi ScrollViewAnda dapat masuk "ditangani", yang berkaitan dengan masalah yang orang katakan datang dengan menggunakan ScrollView. Ini adalah apa yang dikatakan dokumentasi tentang penggunaan 'ditangani': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Di sinilah itu dirujuk.

sedang ScrollViewdigunakan

keyboardShouldPersistTaps="handled" 

Ini akan melakukan pekerjaan Anda.

Ada banyak cara Anda bisa menangani ini, jawaban di atas tidak termasuk returnType karena tidak termasuk dalam bahasa asli saat itu.

1: Anda dapat menyelesaikannya dengan membungkus komponen Anda di dalam ScrollView, secara default ScrollView menutup keyboard jika kami menekan di suatu tempat. Tetapi jika Anda ingin menggunakan ScrollView tetapi nonaktifkan efek ini. Anda dapat menggunakan pointer pointerEvent untuk scrollView pointerEvents = 'none' .

2: Jika Anda ingin menutup keyboard dengan menekan tombol, Anda dapat menggunakannya Keyboarddarireact-native

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

3: Anda juga dapat menutup keyboard saat mengklik tombol kembali pada keyboard, CATATAN: jika jenis keyboard Anda numerik, Anda tidak akan memiliki kunci kembali. Jadi, Anda dapat mengaktifkannya dengan memberikannya prop, returnKeyType ke done. atau Anda dapat menggunakan onSubmitEditing={Keyboard.dismiss}, Itu dipanggil setiap kali kita menekan tombol kembali. Dan jika Anda ingin mengabaikan keyboard saat kehilangan fokus, Anda dapat menggunakan onBlur prop,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()akan melakukannya. Tetapi kadang-kadang itu mungkin kehilangan fokus dan Keyboard tidak akan dapat menemukan referensi. Cara yang paling konsisten untuk dilakukan adalah memasukkan ref=_refke Input teks, dan lakukan _ref.blur()ketika Anda perlu memberhentikan, dan _ref.focus()ketika Anda perlu membawa kembali keyboard.

coba keyboard.dismiss(). Ini berhasil untuk saya

Berikut ini solusi saya untuk Keyboard yang mengabaikan dan menggulir ke mengetuk TextInput (Saya menggunakan ScrollView dengan keyboardDismissMode prop):

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;

pemakaian:

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

gunakan paket ini react-native-keyboard-aware-scroll-view

gunakan komponen itu sebagai komponen root Anda

karena paket ini react-native-keyboard-aware-scroll-viewjuga memiliki scrollView, Anda perlu menambahkan ini ke dalamnya:

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