반응 원어민으로 키보드 숨기기
텍스트 입력을 탭하면 (반환 키가 아닌) 키보드를 다시 꺼내기 위해 다른 곳을 탭할 수 있게 됩니다.제가 읽은 튜토리얼이나 블로그 투고에서는 이에 관한 정보를 전혀 찾을 수 없었습니다.
이 기본적인 예는 시뮬레이터의 react-native 0.4.2에서는 아직 동작하지 않습니다.아직 아이폰에서 시도하지 못했어요.
<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가 여러 개 것 .복수가 있는 것처럼textInput ""button 때 .
은 '보기'를 '보기'로 입니다.TouchableWithoutFeedback를 호출하고 있습니다.Keyboard.dismiss()
이제 집: 이를를를를 edit edit edit edit edit edit edit edit edit edit edit edit edit 를 사용할 수 있습니다.ScrollViewkeyboardShouldPersistTaps='handled'탭이 어린이에 의해 처리되지 않을 때만 키보드를 해제한다(다른 텍스트 탭 입력 또는 버튼).
가지고 계신 경우
<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()
의 "Respect Native"를 합니다.Keyboard.dismiss()
갱신된 답변
React Native(네이티브 반응)에 되었습니다.dismiss()의 Keyboard은 다음과 같습니다.
import { Keyboard } from 'react-native';
Keyboard.dismiss()
원답
React Native's Library를 사용합니다.
저도 비슷한 문제가 있어서 나만 이해를 못하는 것 같았어요.
스크롤 뷰
「 」가 ScrollView ""와 것"을 지정합니다ListView 、 [ ] [ 이벤트에 할 수 .
이 제안은 다음과 같은 가치를 가질 수 있습니다.none,interactive ★★★★★★★★★★★★★★★★★」on-drag자세한 내용은 여기를 참조하십시오.
일반 보기
외에 다른 ScrollView때는 키보드를 사용하면 .TouchableWithoutFeedback the를 ,onPressReact Native 유틸리티 라이브러리를 사용하여 키보드를 꺼냅니다.
이 예에서는 다음과 같은 작업을 수행할 수 있습니다.
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 수 그의 모든 을 1개의 의 1개의 해야 합니다.View위와 같이
이것을 커스텀 해고에 사용한다.
var dismissKeyboard = require('dismissKeyboard');
var TestView = React.createClass({
render: function(){
return (
<TouchableWithoutFeedback
onPress={dismissKeyboard}>
<View />
</TouchableWithoutFeedback>
)
}
})
간단한 답은 View 대신 ScrollView를 사용하여 스크롤 가능 속성을 false로 설정하는 것입니다(다만 일부 스타일링을 조정해야 할 수도 있습니다).
이렇게 하면 다른 곳을 두드리는 순간 키보드가 꺼집니다.이것은 리액트 네이티브의 문제일 수 있지만 탭이벤트는 ScrollView로만 처리되므로 동작에 영향을 줍니다.
편집: jlodra 덕분입니다.다른 텍스트 입력에 직접 탭하고 나서 외부에 탭해도 키보드는 숨기지 않습니다.
Import 할 수 있습니다. keyboard다음과 같은 반응 반응 반응으로부터:
import { Keyboard } from 'react-native';
코드에는 다음과 같은 것이 포함될 수 있습니다.
render() {
return (
<TextInput
onSubmit={Keyboard.dismiss}
/>
);
}
static display()
액티브 키보드를 끄고 포커스를 제거합니다.
리액트는 처음이라서 데모 앱을 만들다가 똑같은 문제에 부딪혔어요.「 」를하고 있는 는,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그 위에 있는 다른 만질 수 있는 컨트롤에 의해 감청됩니다. 거예요를 클릭하기.TouchableHighlight 등 )TextInput컨테이너 뷰 내의 )는 이벤트를 트리거하지 않습니다.단, 클릭 시Image이치노
ScrollViewView 해서 해 주세요.keyboardShouldPersistTaps거짓의
<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
<TextInput
placeholder="Post Title"
onChange={(event) => this.updateTitle(event.nativeEvent.text)}
style={styles.default}/>
</ScrollView>
를 ★★★★★★★★★★★★★★★★★★★★★★★★★TouchableWithoutFeedback이상한 스크롤 동작이나 다른 문제를 일으킬 수 있습니다. 에 있는 을 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ViewonStartShouldSetResponder기입된 자산입니다.이렇게 하면 조작하지 않은 모든 터치 조작을 처리하고 키보드를 꺼낼 수 있습니다.중요한 것은 핸들러 함수가 false를 반환하기 때문에 터치이벤트는 정상적으로 전파됩니다.
handleUnhandledTouches(){
Keyboard.dismiss
return false;
}
render(){
<View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
<MyApp>
</View>
}
가장 간단한 방법
import {Keyboard} from 'react-native'
이 하세요.Keyboard.dismiss()
그게 다예요.
여기 내 코드 스크린샷이 있어 네가 더 빨리 이해할 수 있어.
, 그럼 이제 를 '보다 먼저 보다'로 해 볼까요?TouchableWithoutFeedback은 onPress입니다.keyboard.dismiss()
여기 예가 있습니다.
이와 같이 사용자가 textInput 필드를 제외한 화면의 아무 곳이나 탭하면 키보드가 꺼집니다.
몇 가지 방법이 있습니다. 약약면면면면면면면면면면면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>
여러 줄의 텍스트 입력을 해제하는 방법에 대한 실제 예가 필요한 경우 여기 있습니다.이것이 일부 사람들에게 도움이 되기를 바라며, 문서에서는 여러 줄의 입력을 무시하는 방법을 전혀 설명하지 않았습니다.여기 스택에 실제로 글을 올리는 것은 아직입니다만, 이 스니펫이 실제의 투고를 참조하는 것이 좋다고 생각되는 사람이 있으면 가르쳐 주세요.
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시를 비활성화합니다.입력 사이를 전환할 때 사용자 이름과 비밀번호 양식에 의해 키보드가 해제됩니다.전환 시 키보드를 활성화하기 위한 몇 가지 제안을 받고 싶습니다.TextInputs「」를 하고 .ScrollView.
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it
어프로치 No.2
사용자 @ricardo-stuven이 이를 지적해 준 덕분에 반응 네이티브 문서의 예에서 볼 수 있는 키보드를 끄는 더 좋은 방법이 있습니다.
Import 순 import ImportKeyboard 그것을 방법이라고 .dismiss()
최신 React Native 버전(0.4.2)을 사용하여 테스트한 결과, 다른 곳을 탭하면 키보드가 꺼집니다.
참고: 키보드를 "OnEndEditing" 프로포트에 할당하여 키보드를 해제할 때 실행할 콜백 함수를 설정할 수 있습니다.
리액트 네이티브의 최신 버전은 탭 아웃으로 키보드를 제거할 수 있는 문제를 해결했습니다.
수 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★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>
나에게 효과가 있었다
리액트 네이티브의 KeyBoard API를 사용하면 효과가 있습니다.
import { Keyboard } from 'react-native'
// Hide the keyboard whenever you want using !
Keyboard.dismiss()
키보드 모듈은 키보드 이벤트를 제어하는 데 사용됩니다.
import { Keyboard } from 'react-native'렌더 메서드에서 아래 코드를 추가합니다.
render() { return <TextInput onSubmitEditing={Keyboard.dismiss} />; }
사용할 수 있습니다.
Keyboard.dismiss()
static discept() 활성 키보드를 해제하고 반응 네이티브 문서에 따라 포커스를 제거합니다.
https://facebook.github.io/react-native/docs/keyboard.html
사용하다
Keyboard.dismiss(0);
키보드를 숨깁니다.
「」를 사용합니다.keyboardShouldPersistTaps ScrollView스크롤 뷰(Scroll View(스크롤 뷰).에서는 'handled'의과 같이 하고 있습니다. 'handled'는 'handled'로 되어 .the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). 여기서 참조할 수 있습니다.
첫 번째 키보드 Import
import { Keyboard } from 'react-native'
그럼 네 안에TextInput추가하다Keyboard.dismissonSubmitEditing 돼요. ' 이런 거 있잖아요. 이렇게 생긴 게 있어야지.
render(){
return(
<View>
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
</View>
)
}
반응 원어민의 피드백 없이 키보드와 토치블을 사용할 수 있습니다.
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback
onPress={() => Keyboard.dismiss()}
>
{children}
</TouchableWithoutFeedback>
);
그리고 다음과 같이 사용합니다.
const App = () => (
<DismissKeyboard>
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="username"
keyboardType="numeric"
/>
<TextInput
style={styles.input}
placeholder="password"
/>
</View>
</DismissKeyboard>
);
여기도 소스코드로 설명했습니다.
Keyboard.dismiss()를 사용하여 키보드를 언제든지 끌 수 있습니다.
를를 wrap wrap View의 TextInputin a a a a Pressable pass를 .Keyboard. dismissonPress때문에 품입 the the the 을 탭 할 . 따라서, 만약 사용자가 외부로 이동처리를TextInput에서는 '아, 아, 아, 이 필드에서는Keyboard. dismiss 「」가 .TextInput필드의 초점이 흐트러지고 키보드가 숨겨집니다.
<Pressable onPress={Keyboard.dismiss}>
<View>
<TextInput
multiline={true}
onChangeText={onChangeText}
value={text}
placeholder={...}
/>
</View>
</Pressable>
ScrollView
keyboardShouldPersistTaps="handled"
이거면 충분할 거야
에는 '어느 정도인지', '어느 정도인지', '어느 정도인지', '어느 정도인지', '어느 정도인지', '어느 정도인지', '어느 정도인지 '어느 정도인지', '어느 정도인지', '어느 정도인지', '어느 정도인지'가 없습니다.returnType그때 리액션에는 포함되지 않았기 때문에
ScrollView 컴포넌트를 할 수 를 닫습니다.1 : ScrollView는 키보드를 닫습니다.스크롤 뷰ScrollView는 포인터 하여 스크롤 뷰 이벤트프로파일을 사용할 수 .pointerEvents = 'none'.
2: 키보드를 닫으면 .Keyboard부에서react-native
import { Keyboard } from 'react-native' and inside onPress of that button, you can use키보드.Dis()보dismiss드)'(?
3. 키보드 유형을 클릭하면 키보드의 반환 키를 클릭하면 키보드가 숫자일 수 있습니다.3: 키보드의 Return 키를 클릭해도 키보드를 닫을 수 있습니다.주의: 키보드의 유형이 숫자일 경우 Return 키는 없습니다.그래서, 반품 키 로, 반환 키 펠 공 성 습 있 화 니 수key so,,다 itkey can할 it a enable by return you활 giving prop즉여하를 returnType to 입력처done을 수도 있고, 을 수도 .onSubmitEditing={Keyboard.dismiss}리턴 키를 누를 때마다 호출됩니다. 때 소품인 Blur를 .onBlur = {Keyboard.dismiss}
Keyboard.dismiss()아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 네.다만, 포커스가 흐트러져 키보드가 참조를 찾을 수 없는 경우가 있습니다.가장 일관성 있는 방법은 이 제품을 사용하는 것입니다.ref=_ref하여 을 실행합니다._ref.blur() 및 "해제"를 합니다._ref.focus()이치노
키보드가 꺼지고 TextInput으로 스크롤하기 위한 솔루션입니다(키보드와 ScrollView를 사용하고 있습니다).Dismiss모드 프로펠러):
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>
);
}
언급URL : https://stackoverflow.com/questions/29685421/hide-keyboard-in-react-native
'code' 카테고리의 다른 글
| 반응 - TypeError: 정의되지 않은 속성 'props'를 읽을 수 없습니다. (0) | 2023.03.09 |
|---|---|
| PowerShell의 Invoke-WebRequest에서 JSON을 해석하는 방법 (0) | 2023.03.09 |
| 지정된 항목으로 스크롤하는 AngularJS 지시어 (0) | 2023.03.09 |
| javascript의 set Timeout과 angularjs의 $timeout 서비스의 차이 (0) | 2023.03.09 |
| 용기 내 angularjs 무한 스크롤 (0) | 2023.03.09 |