텍스트 입력을 누르면 키보드를 다시 닫기 위해 다른 곳을 탭 할 수 있기를 원합니다 (반환 키는 아님). 내가 읽은 모든 자습서와 블로그 게시물에서 이것에 관한 약간의 정보를 찾지 못했습니다.
이 기본 예제는 시뮬레이터에서 react-native 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'
않는 방법은 없기 때문에 키보드가 닫히지 않는 문제는 더 심각해집니다 .
여러 개의 textInput
s 또는 button
s 가있는 것처럼 키보드를 켠 상태에서을 두드리면 키보드가 사라지는 것처럼 View를 ScrollView로 바꾸는 것은 올바른 해결책 이 아닙니다.
올바른 방법은 View를 사용 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>
)
}
})
답변
반응 네이티브 사용 Keyboard.dismiss()
업데이트 된 답변
React Native는에 정적 dismiss()
메소드를 노출 시켰 Keyboard
으므로 업데이트 된 메소드는 다음과 같습니다.
import { Keyboard } from 'react-native';
Keyboard.dismiss()
원래 답변
React Native의 dismissKeyboard
라이브러리를 사용하십시오 .
나는 매우 비슷한 문제가 있었고 그것을 얻지 못한 유일한 사람처럼 느꼈습니다.
ScrollViews
당신이있는 경우 ScrollView
유사한 그것으로부터 상속는 것을, 또는 아무것도 ListView
, 당신이 자동으로 눌러 또는 드래그 이벤트를 기반으로 키보드를 기각하는 소품을 추가 할 수 있습니다.
소품은 keyboardDismissMode
및의 값을 가질 수 있습니다 none
, interactive
또는 on-drag
. 자세한 내용은 여기 를 참조하십시오 .
정기 조회
당신이 아닌 다른이있는 경우 ScrollView
와 키보드를 닫으려면 어떤 프레스 싶습니다, 당신은 간단하게 사용할 수 있습니다 TouchableWithoutFeedback
및이 onPress
사용 원주민의 유틸리티 라이브러리 반작용 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
위에 표시된 것처럼 그 아래에있는 모든 것을 하나의 랩으로 묶어야합니다 .
답변
간단한 대답은 View 대신 ScrollView를 사용하고 scrollable 속성을 false로 설정하는 것입니다 (스타일을 조정해야 할 수도 있음).
이렇게하면 다른 곳을 두드리는 순간 키보드가 사라집니다. 이것은 반응 네이티브의 문제 일 수 있지만 탭 이벤트는 ScrollViews에서만 처리되는 것으로 보이며 이는 설명 된 동작으로 이어집니다.
편집 : jllodra에게 감사드립니다. 다른 텍스트 입력을 직접 탭한 다음 외부로 탭하면 키보드가 여전히 숨겨지지 않습니다.
답변
아래와 같이 반응 네이티브 에서 가져올 수 있습니다 .keyboard
import { Keyboard } from 'react-native';
코드에서 다음과 같이 될 수 있습니다.
render() {
return (
<TextInput
onSubmit={Keyboard.dismiss}
/>
);
}
정적 해제 ()
활성 키보드를 닫고 초점을 제거합니다.
답변
저는 React를 처음 접했고 데모 앱을 만드는 동안 똑같은 문제가 발생했습니다. onStartShouldSetResponder
소품 ( 여기에서 설명 ) 을 사용하면 평범한 낡은 부분을 만질 수 있습니다 React.View
. 이 전략에 대한 경험이 풍부한 React-ers의 생각을 듣고 궁금합니다.
containerTouched(event) {
this.refs.textInput.blur();
return false;
}
render() {
<View onStartShouldSetResponder={this.containerTouched.bind(this)}>
<TextInput ref='textInput' />
</View>
}
여기에 주목해야 할 2 가지. 먼저 여기 에서 논의한 것처럼 아직 모든 하위 뷰의 편집을 종료 할 수있는 방법이 없기 때문에 TextInput
직접 흐리게 처리 하기 위해 직접 참조해야 합니다. 둘째, 그 onStartShouldSetResponder
위에 다른 터치 가능한 컨트롤이 인터셉트됩니다. 따라서 컨테이너보기에서 TouchableHighlight
등을 클릭하면 이벤트가 트리거 되지 않습니다 . 그러나 컨테이너보기 내 에서을 클릭하면 여전히 키보드가 사라집니다.TextInput
Image