Ẩn bàn phím trong phản ứng gốc

Nếu tôi nhấn vào một textinput, tôi muốn có thể nhấn vào một nơi khác để tắt bàn phím một lần nữa (mặc dù không phải là phím trở lại). Tôi chưa tìm thấy mẩu thông tin nhỏ nhất liên quan đến điều này trong tất cả các bài hướng dẫn và bài đăng trên blog mà tôi đọc.

Ví dụ cơ bản này vẫn không hoạt động đối với tôi với phản ứng gốc 0.4.2 trong Trình mô phỏng. Không thể thử nó trên iPhone của tôi.

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

Vấn đề với bàn phím không loại bỏ trở nên nghiêm trọng hơn nếu bạn có keyboardType='numeric', vì không có cách nào để loại bỏ nó.

Thay thế View bằng ScrollView không phải là một giải pháp chính xác, vì nếu bạn có nhiều textInputs hoặc buttons, chạm vào chúng trong khi bàn phím lên sẽ chỉ loại bỏ bàn phím.

Cách chính xác là đóng gói View với TouchableWithoutFeedbackvà gọiKeyboard.dismiss()

EDIT: Bây giờ bạn có thể sử dụng ScrollViewvới keyboardShouldPersistTaps='handled'chỉ bỏ bàn phím khi vòi nước không được xử lý bởi các trẻ em (tức là khai thác trên textInputs hoặc các nút khác.)

Nếu bạn có

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

Thay đổi nó thành

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

hoặc là

import {Keyboard} from 'react-native'

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

EDIT: Bạn cũng có thể tạo Thành phần bậc cao hơn để loại bỏ bàn phím.

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)

Đơn giản chỉ cần sử dụng nó như thế này

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

LƯU Ý: accessible={false}bắt buộc phải làm cho biểu mẫu đầu vào tiếp tục có thể truy cập được thông qua VoiceOver. Những người khiếm thị sẽ cảm ơn bạn!

Điều này vừa được cập nhật và tài liệu ! Không còn thủ đoạn ẩn giấu.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

sử dụng điều này để sa thải tùy chỉnh

var dismissKeyboard = require('dismissKeyboard');

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

Sử dụng React Native Keyboard.dismiss()

Cập nhật câu trả lời

React Native tiếp xúc với dismiss()phương thức tĩnh trên Keyboard, vì vậy phương thức được cập nhật là:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Câu trả lời gốc

Sử dụng React Native dismissKeyboard Thư viện .

Tôi đã có một vấn đề rất giống nhau và cảm thấy như mình là người duy nhất không mắc phải nó.

Cuộn xem

Nếu bạn có một ScrollViewhoặc bất cứ thứ gì thừa hưởng từ nó như một ListView, bạn có thể thêm một chỗ dựa sẽ tự động loại bỏ bàn phím dựa trên các sự kiện nhấn hoặc kéo.

Prop là keyboardDismissModevà có thể có giá trị none, interactivehoặc on-drag. Bạn có thể đọc thêm về điều đó ở đây .

Lượt xem thường xuyên

Nếu bạn có thứ gì đó không phải là a ScrollViewvà bạn muốn có bất kỳ lần nhấn nào để tắt bàn phím, bạn có thể sử dụng một đơn giản TouchableWithoutFeedbackvà onPresssử dụng thư viện tiện ích của React Native dismissKeyboardđể loại bỏ bàn phím cho bạn.

Trong ví dụ của bạn, bạn có thể làm một cái gì đó như thế này:

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>

Lưu ý: TouchableWithoutFeedbackchỉ có thể có một con duy nhất nên bạn cần bọc mọi thứ bên dưới nó trong một hình duy nhất Viewnhư hình trên.

Câu trả lời đơn giản là sử dụng ScrollView thay vì View và đặt thuộc tính có thể cuộn thành false (có thể cần phải điều chỉnh một số kiểu mặc dù).

Bằng cách này, bàn phím bị loại bỏ ngay khi tôi chạm vào một nơi khác. Đây có thể là một vấn đề với phản ứng gốc, nhưng các sự kiện nhấn dường như chỉ được xử lý với ScrollViews dẫn đến hành vi được mô tả.

Chỉnh sửa: Cảm ơn jllodra. Xin lưu ý rằng nếu bạn nhấn trực tiếp vào Textinput khác rồi ở bên ngoài, bàn phím vẫn không ẩn.

Bạn có thể nhập keyboard từ Reac -igen như dưới đây:

import { Keyboard } from 'react-native';

và trong mã của bạn có thể là một cái gì đó như thế này:

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

loại bỏ tĩnh ()

Loại bỏ bàn phím hoạt động và loại bỏ tiêu điểm.

Tôi hoàn toàn mới với React và gặp vấn đề tương tự trong khi tạo một ứng dụng demo. Nếu bạn sử dụng onStartShouldSetResponderprop (được mô tả ở đây ), bạn có thể chạm vào một cái cũ React.View. Tò mò muốn nghe những suy nghĩ của React-ers có kinh nghiệm hơn về chiến lược này / nếu có một chiến lược tốt hơn, nhưng đây là điều làm việc cho tôi:

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

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

2 điều cần lưu ý ở đây. Đầu tiên, như được thảo luận ở đây , vẫn chưa có cách nào để kết thúc chỉnh sửa tất cả các cuộc phỏng vấn, vì vậy chúng tôi phải tham khảo TextInputtrực tiếp để làm mờ nó. Thứ hai, onStartShouldSetResponderbị chặn bởi các điều khiển cảm ứng khác trên đầu nó. Vì vậy, nhấp vào TouchableHighlightvv (bao gồm cả cái khác TextInput) trong chế độ xem container sẽ không kích hoạt sự kiện. Tuy nhiên, nhấp vào một Imagetrong chế độ xem container sẽ vẫn loại bỏ bàn phím.

Sử dụng ScrollViewthay vì Viewvà đặt keyboardShouldPersistTapsthuộc tính thành false.

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

Nếu bất kỳ ai cần một ví dụ hoạt động về cách loại bỏ đầu vào văn bản nhiều dòng ở đây ya đi! Hy vọng điều này sẽ giúp một số người ngoài kia, các tài liệu không mô tả một cách để loại bỏ đầu vào đa dòng, ít nhất là không có tài liệu tham khảo cụ thể về cách thực hiện. Vẫn là một người mới thực sự đăng bài ở đây trên stack, nếu bất cứ ai nghĩ rằng đây nên là một tài liệu tham khảo cho bài đăng thực tế đoạn trích này được viết cho tôi biết.

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

Sử dụng cập nhật của ScrollViewchoReact Native 0.39

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

Mặc dù, vẫn còn một vấn đề với hai TextInputhộp. ví dụ. Một tên người dùng và mật khẩu bây giờ sẽ loại bỏ bàn phím khi chuyển đổi giữa các đầu vào. Rất thích nhận được một số đề xuất để giữ cho bàn phím tồn tại khi chuyển đổi giữa TextInputskhi sử dụng a ScrollView.

Có một số cách, nếu bạn kiểm soát sự kiện như onPressbạn có thể sử dụng:

import { Keyboard } from 'react-native'

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

nếu bạn muốn đóng bàn phím khi sử dụng di chuyển:

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

Tùy chọn khác là khi người dùng nhấp bên ngoài bàn phím:

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

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

Cách tiếp cận số 2;

Nhờ user @ Ricardo-stuven để chỉ ra này, có một cách tốt hơn để bỏ qua những bàn phím mà bạn có thể nhìn thấy trong ví dụ trong tài liệu gốc phản ứng.

Nhập đơn giản Keyboardvà gọi phương thức của nódismiss()

Gói các thành phần của bạn trong một TouchableWithoutFeedbackcó thể gây ra một số hành vi cuộn kỳ lạ và các vấn đề khác. Tôi thích quấn ứng dụng trên cùng của tôi trong một Viewvới các onStartShouldSetRespondertài sản điền vào. Điều này sẽ cho phép tôi để xử lý tất cả chạm được xử lý và sau đó bỏ qua bàn phím. Điều quan trọng, vì chức năng xử lý trả về sai, sự kiện chạm được lan truyền như bình thường.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Tôi chỉ thử nghiệm điều này bằng cách sử dụng mới nhất Phản ứng phiên bản Native (0.4.2), và bàn phím được sa thải khi bạn khai thác ở những nơi khác.

Và FYI: bạn có thể đặt chức năng gọi lại được thực thi khi bạn tắt bàn phím bằng cách gán nó cho chỗ dựa "onEndEditing".

Nếu tôi sai lầm là không phải là phiên bản mới nhất của Phản ứng Native đã giải quyết vấn đề này là có thể bỏ qua bàn phím bằng cách khai thác ra.

Làm thế nào về việc đặt một thành phần cảm ứng xung quanh / bên cạnh 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>
        )
    }
}

Gói toàn bộ thành phần của bạn với:

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

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

Đã làm cho tôi

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

Sử dụng

Keyboard.dismiss(0);

để ẩn bàn phím.

Mô-đun bàn phím được sử dụng để kiểm soát các sự kiện bàn phím.

• import { Keyboard } from 'react-native'

• Thêm mã dưới đây trong phương thức kết xuất.

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

Bạn có thể dùng -

Keyboard.dismiss()

bỏ qua tĩnh () Loại bỏ bàn phím hoạt động và xóa tiêu điểm theo tài liệu gốc phản ứng.

Bàn phím nhập đầu tiên

import { Keyboard } from 'react-native'

Sau đó, bên trong TextInputbạn thêm Keyboard.dismissvào chỗ dựa onSubmitEditing. Bạn nên có một cái gì đó trông như thế này:

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

Sử dụng keyboardShouldPersistTapstrong ScrollViewbạn có thể chuyển vào "đã xử lý", xử lý các vấn đề mà mọi người đang nói đến khi sử dụng ScrollView. Đây là những gì tài liệu nói về việc sử dụng 'được xử lý': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Đây là nơi nó được tham chiếu.

đang ScrollViewsử dụng

keyboardShouldPersistTaps="handled" 

Điều này sẽ làm công việc của bạn.

Có nhiều cách bạn có thể xử lý việc này, các câu trả lời ở trên không bao gồm returnType vì nó không được bao gồm trong phản ứng gốc vào thời điểm đó.

1: Bạn có thể giải quyết nó bằng cách gói các thành phần của mình bên trong ScrollView, theo mặc định ScrollView sẽ đóng bàn phím nếu chúng ta nhấn vào đâu đó. Nhưng trong trường hợp bạn muốn sử dụng ScrollView nhưng vô hiệu hóa hiệu ứng này. bạn có thể sử dụng propEvent prop để scrollView pointerEvents = 'none' .

2: Nếu bạn muốn đóng bàn phím bằng cách nhấn nút, Bạn chỉ có thể sử dụng Keyboardtừreact-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can useBàn phím.dismiss () '.

3: Bạn cũng có thể đóng bàn phím khi nhấp vào phím quay lại trên bàn phím, LƯU Ý: nếu loại bàn phím của bạn là số, bạn sẽ không có phím quay lại. Vì vậy, bạn có thể kích hoạt nó bằng cách cung cấp cho nó một prop, returnKeyType done. hoặc bạn có thể sử dụng onSubmitEditing={Keyboard.dismiss}, Nó được gọi bất cứ khi nào chúng tôi nhấn phím quay lại. Và nếu bạn muốn tắt bàn phím khi mất tiêu điểm, bạn có thể sử dụng trên prop prop,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()sẽ làm điều đó. Nhưng đôi khi nó có thể mất tiêu điểm và Bàn phím sẽ không thể tìm thấy ref. Cách nhất quán để làm là đặt một ref=_reftextInput và làm _ref.blur()khi bạn cần loại bỏ và _ref.focus()khi nào bạn cần đưa bàn phím trở lại.

thử keyboard.dismiss(). Nó làm việc cho tôi

Đây là giải pháp của tôi để loại bỏ Bàn phím và cuộn đến TextInput đã gõ (Tôi đang sử dụng ScrollView với bàn phímDismissMode 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;

sử dụng:

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

sử dụng gói này react-native-keyboard-aware-scroll-view

sử dụng thành phần đó làm thành phần gốc của bạn

vì gói này react-native-keyboard-aware-scroll-viewcũng có một cuộn Xem, bạn cần thêm nó vào nó:

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