ซ่อนแป้นพิมพ์ในภาษาที่ตอบสนอง

หากฉันแตะลงใน textinput ฉันต้องการที่จะสามารถแตะที่อื่นเพื่อยกเลิกแป้นพิมพ์อีกครั้ง (ไม่ใช่ปุ่มย้อนกลับแม้ว่า) ฉันไม่พบข้อมูลเกี่ยวกับสิ่งนี้ในบทแนะนำและบล็อกโพสต์ที่ฉันอ่าน

ตัวอย่างพื้นฐานนี้ยังใช้งานไม่ได้สำหรับฉันที่มีปฏิกิริยาตอบสนองพื้นเมือง 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>

ปัญหาเกี่ยวกับคีย์บอร์ดที่ไม่ได้ยกออกจะรุนแรงขึ้นหากคุณมีkeyboardType='numeric'เนื่องจากไม่มีวิธีที่จะยกเลิก

การแทนที่มุมมองด้วย ScrollView ไม่ใช่วิธีแก้ไขที่ถูกต้องราวกับว่าคุณมีหลายtextInputs หรือbuttons แตะที่พวกเขาในขณะที่แป้นพิมพ์ขึ้นจะยกเลิกคีย์บอร์ดเท่านั้น

วิธีที่ถูกต้องคือการห่อหุ้มมุมมองด้วยTouchableWithoutFeedbackและการโทรKeyboard.dismiss()

แก้ไข: ตอนนี้คุณสามารถใช้ScrollViewกับkeyboardShouldPersistTaps='handled'เพียงยกเลิกแป้นพิมพ์เมื่อแตะที่ไม่ได้รับการจัดการโดยเด็ก ๆ (เช่นการแตะที่ textInputs อื่น ๆ หรือปุ่ม.)

ถ้าคุณมี

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

เปลี่ยนเป็น

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

หรือ

import {Keyboard} from 'react-native'

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

แก้ไข: คุณยังสามารถสร้างองค์ประกอบการสั่งซื้อที่สูงขึ้นเพื่อยกเลิกคีย์บอร์ด

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)

เพียงใช้มันอย่างนี้

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

หมายเหตุ: accessible={false}จำเป็นต้องใช้เพื่อให้แบบฟอร์มการป้อนข้อมูลยังคงสามารถเข้าถึงได้ผ่าน VoiceOver คนที่มีความบกพร่องทางสายตาจะขอบคุณ!

สิ่งนี้เพิ่งได้รับการอัพเดตและบันทึกไว้ ! ไม่มีลูกเล่นซ่อนเร้นอีกต่อไป

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

ใช้สิ่งนี้สำหรับการเลิกจ้างที่กำหนดเอง

var dismissKeyboard = require('dismissKeyboard');

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

ใช้ React Native's Keyboard.dismiss()

อัปเดตคำตอบ

React Native เปิดเผยdismiss()วิธีการแบบคงที่บนKeyboardดังนั้นวิธีการที่อัปเดตคือ:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

คำตอบเดิม

ใช้ React Native's dismissKeyboardไลบรารี

ฉันมีปัญหาที่คล้ายกันมากและรู้สึกว่าฉันเป็นคนเดียวที่ไม่ได้รับ

ScrollViews

หากคุณมีScrollViewหรือสิ่งใดก็ตามที่สืบทอดมาจากมันเช่นListViewคุณสามารถเพิ่มเสาที่จะยกเลิกแป้นพิมพ์โดยอัตโนมัติตามการกดหรือการลากเหตุการณ์

เสาเป็นkeyboardDismissModeและสามารถมีค่าของnone, หรือinteractive on-dragคุณสามารถอ่านเพิ่มเติมเกี่ยวกับที่นี่

มุมมองปกติ

หากคุณมีสิ่งอื่นนอกเหนือจาก a ScrollViewและคุณต้องการให้สื่อใด ๆ ยกเลิกการใช้งานแป้นพิมพ์คุณสามารถใช้งานง่าย ๆTouchableWithoutFeedbackและonPressใช้ไลบรารี่ของ React Native dismissKeyboardเพื่อเลิกใช้คีย์บอร์ด

ในตัวอย่างของคุณคุณสามารถทำสิ่งนี้:

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ตามที่แสดงด้านบน

คำตอบง่ายๆคือใช้ ScrollView แทน View และตั้งค่าคุณสมบัติ scrollable เป็น false (อาจต้องปรับแต่งสไตล์บางอย่าง)

ด้วยวิธีนี้แป้นพิมพ์จะถูกยกเลิกเมื่อฉันแตะที่อื่น นี่อาจเป็นปัญหาเกี่ยวกับการตอบสนองดั้งเดิม แต่ดูเหมือนว่าเหตุการณ์การแตะจะจัดการกับ ScrollViews เท่านั้นซึ่งนำไปสู่พฤติกรรมที่อธิบายไว้

แก้ไข: ขอบคุณ jllodra โปรดทราบว่าหากคุณแตะที่ Textinput อื่นโดยตรงจากนั้นแป้นพิมพ์จะไม่ซ่อน

คุณสามารถนำเข้า keyboardจากปฏิกิริยาตอบสนองเช่นด้านล่าง:

import { Keyboard } from 'react-native';

และในรหัสของคุณอาจเป็นดังนี้:

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

เลิกจ้างแบบคงที่ ()

ปิดแป้นพิมพ์ที่ใช้งานอยู่และลบโฟกัส

ฉันใหม่เอี่ยมสำหรับ React และพบปัญหาเดียวกันในขณะที่สร้างแอพตัวอย่าง หากคุณใช้ไม้onStartShouldSetResponderค้ำยัน (อธิบายไว้ที่นี่ ) คุณสามารถหยิบจับสิ่งเก่า ๆReact.Viewได้ อยากฟังความคิดของผู้ตอบโต้ที่มีประสบการณ์มากขึ้นเกี่ยวกับกลยุทธ์นี้ / หากมีสิ่งที่ดีกว่า แต่นี่คือสิ่งที่ได้ผลสำหรับฉัน:

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

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

2 สิ่งที่ควรทราบที่นี่ ก่อนอื่นดังที่กล่าวไว้ที่นี่ยังไม่มีวิธีสิ้นสุดการแก้ไขการดูทั้งหมดดังนั้นเราจึงต้องอ้างอิงTextInputโดยตรงเพื่อทำให้ภาพเบลอ ประการที่สองonStartShouldSetResponderจะถูกดักจับโดยตัวควบคุมแบบสัมผัสอื่น ๆ ที่ด้านบนของมัน ดังนั้นการคลิกที่TouchableHighlightetc (รวมถึงอื่น ๆTextInput) ในมุมมองคอนเทนเนอร์จะไม่ทำให้เกิดเหตุการณ์ อย่างไรก็ตามการคลิกImageที่มุมมองภายในคอนเทนเนอร์จะยังคงเป็นการยกเลิกแป้นพิมพ์

ใช้ScrollViewแทนViewและตั้งค่าkeyboardShouldPersistTapsคุณลักษณะเป็นเท็จ

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

หากมีคนต้องการตัวอย่างการทำงานของวิธีการยกเลิกการป้อนข้อความหลายบรรทัดที่นี่คุณไป! หวังว่าสิ่งนี้จะช่วยให้บางคนออกไปที่นั่นเอกสารไม่ได้อธิบายวิธีการยกเลิกการป้อนข้อมูลแบบหลายบรรทัดเลยอย่างน้อยก็ไม่มีการอ้างอิงที่เฉพาะเจาะจงเกี่ยวกับวิธีการทำ ยังคงเป็น noob ที่จะโพสต์ที่นี่จริง ๆ ในสแต็คถ้าใครคิดว่านี่ควรอ้างอิงถึงโพสต์จริงตัวอย่างนี้เขียนเพื่อแจ้งให้เราทราบ

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

อัปเดตการใช้งานของ ScrollViewสำหรับReact Native 0.39

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

แม้ว่าจะยังมีปัญหากับสองTextInputกล่อง เช่น. รูปแบบชื่อผู้ใช้และรหัสผ่านจะยกเลิกคีย์บอร์ดเมื่อสลับระหว่างอินพุต ชอบที่จะได้รับข้อเสนอแนะบางอย่างเพื่อให้แป้นพิมพ์ยังมีชีวิตอยู่เมื่อมีการสลับระหว่างในขณะที่ใช้TextInputsScrollView

มีสองสามวิธีถ้าคุณควบคุมเหตุการณ์เช่นonPressคุณสามารถใช้:

import { Keyboard } from 'react-native'

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

หากคุณต้องการปิดแป้นพิมพ์เมื่อใช้การเลื่อน:

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

ตัวเลือกเพิ่มเติมคือเมื่อผู้ใช้คลิกที่นอกแป้นพิมพ์:

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

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

วิธีการ # 2;

ขอบคุณ user @ ricardo-stuven สำหรับการชี้สิ่งนี้มีอีกวิธีที่ดีกว่าในการยกเลิกคีย์บอร์ดซึ่งคุณสามารถดูได้จากตัวอย่างในเอกสารเนทีฟแบบตอบโต้

วิธีการนำเข้าKeyboardและโทรอย่างง่ายdismiss()

การห่อส่วนประกอบของคุณใน a TouchableWithoutFeedbackอาจทำให้เกิดพฤติกรรมการเลื่อนที่แปลกประหลาดและปัญหาอื่น ๆ ฉันชอบที่จะปิดแอพที่สูงที่สุดของฉันViewด้วยonStartShouldSetResponderคุณสมบัติที่ใส่เข้าไปซึ่งจะช่วยให้ฉันจัดการกับการสัมผัสที่ไม่ได้จัดการทั้งหมดแล้วจึงยกเลิกคีย์บอร์ด สิ่งสำคัญเนื่องจากฟังก์ชันตัวจัดการคืนค่าเท็จเหตุการณ์การสัมผัสถูกแพร่กระจายแบบปกติ

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

ฉันเพิ่งทดสอบสิ่งนี้โดยใช้ React Native เวอร์ชันล่าสุด (0.4.2) และแป้นพิมพ์จะถูกยกเลิกเมื่อคุณแตะที่อื่น

และ FYI: คุณสามารถตั้งค่าฟังก์ชั่นการโทรกลับที่จะดำเนินการเมื่อคุณยกเลิกคีย์บอร์ดโดยการกำหนดให้กับเสา "onEndEditing"

หากฉันไม่เข้าใจผิด React Native เวอร์ชันล่าสุดได้แก้ไขปัญหานี้แล้วว่าสามารถยกเลิกแป้นพิมพ์ได้โดยแตะที่ปุ่ม

วิธีการเกี่ยวกับการวางองค์ประกอบที่สัมผัสได้รอบ / ข้าง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>
        )
    }
}

ห่อองค์ประกอบทั้งหมดของคุณด้วย:

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

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

ทำงานให้ฉัน

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

ใช้

Keyboard.dismiss(0);

เพื่อซ่อนแป้นพิมพ์

โมดูลแป้นพิมพ์ใช้เพื่อควบคุมเหตุการณ์แป้นพิมพ์

• import { Keyboard } from 'react-native'

• เพิ่มรหัสด้านล่างในวิธีการแสดงผล

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

คุณสามารถใช้ได้ -

Keyboard.dismiss()

การเลิกจ้างคงที่ () ยกเลิกแป้นพิมพ์ที่ใช้งานอยู่และลบโฟกัสตามเอกสารพื้นเมืองตอบสนอง

แป้นพิมพ์นำเข้าครั้งแรก

import { Keyboard } from 'react-native'

จากนั้นภายในของคุณTextInputคุณเพิ่มKeyboard.dismissไปยังonSubmitEditingเสา คุณควรมีสิ่งที่มีลักษณะเช่นนี้:

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

การใช้งานkeyboardShouldPersistTapsในสิ่งที่ScrollViewคุณสามารถส่งผ่านใน "จัดการ" ซึ่งเกี่ยวข้องกับปัญหาที่ผู้คนพูดว่ามาพร้อมกับการใช้ ScrollView นี่คือสิ่งที่เอกสารบอกว่าเกี่ยวกับการใช้ 'จัดการ': ที่the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). นี่มีการอ้างอิง

ในการScrollViewใช้งาน

keyboardShouldPersistTaps="handled" 

สิ่งนี้จะทำงานของคุณ

มีหลายวิธีที่คุณสามารถจัดการกับสิ่งนี้ได้คำตอบข้างต้นไม่รวมreturnTypeเนื่องจากไม่รวมอยู่ในปฏิกิริยาตอบสนองในขณะนั้น

1: คุณสามารถแก้ไขได้ด้วยการห่อส่วนประกอบของคุณภายใน ScrollView โดยค่าเริ่มต้น ScrollView จะปิดแป้นพิมพ์หากเรากดที่ใดที่หนึ่ง แต่ในกรณีที่คุณต้องการใช้ ScrollView แต่ปิดการใช้งานเอฟเฟกต์นี้ คุณสามารถใช้ pointerEvent prop เพื่อ scrollView pointerEvents = 'none'scrollview

2: หากคุณต้องการปิดแป้นพิมพ์ด้วยการกดปุ่มคุณสามารถใช้Keyboardจากreact-native

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

3: คุณสามารถปิดแป้นพิมพ์เมื่อคุณคลิกปุ่มส่งคืนบนแป้นพิมพ์ได้หมายเหตุ: หากประเภทแป้นพิมพ์ของคุณเป็นตัวเลขคุณจะไม่มีปุ่มส่งคืน ดังนั้นคุณสามารถเปิดใช้งานได้โดยให้มันเสา, returnKeyType doneไป หรือคุณสามารถใช้onSubmitEditing={Keyboard.dismiss}มันจะถูกเรียกเมื่อใดก็ตามที่เรากดปุ่มย้อนกลับ และหากคุณต้องการยกเลิกคีย์บอร์ดเมื่อไม่สามารถโฟกัสได้คุณสามารถใช้เสาสีฟ้าonBlur = {Keyboard.dismiss}

Keyboard.dismiss()จะทำมัน แต่บางครั้งมันอาจสูญเสียโฟกัสและแป้นพิมพ์จะไม่สามารถค้นหาการอ้างอิง วิธีที่สอดคล้องที่สุดในการทำคือใส่ref=_refลงใน textInput และทำ_ref.blur()เมื่อคุณต้องการยกเลิกและ_ref.focus()เมื่อคุณต้องนำคีย์บอร์ดกลับมา

keyboard.dismiss()ลอง มันใช้งานได้สำหรับฉัน

นี่คือวิธีแก้ปัญหาของฉันสำหรับการยกคีย์บอร์ดและเลื่อนไปแตะ TextInput (ฉันใช้ ScrollView กับ 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;

การใช้งาน:

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

ใช้แพ็คเกจนี้ react-native-keyboard-aware-scroll-view

ใช้องค์ประกอบนั้นเป็นองค์ประกอบหลักของคุณ

เนื่องจากแพ็คเกจreact-native-keyboard-aware-scroll-viewนี้มี scrollView คุณจึงต้องเพิ่มมันเข้าไป:

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