안드로이드 키보드가 올라왔을때 바닥에 있는 버튼 클릭하기 질문 드립니다

제목 그대로 안드로이드 기기에서 문제입니다.

TextInput 클릭하면 키보드가 올라옵니다.
TextInput 에 글을 입력하면 X버튼이 활성화가 됩니다.
X버튼의 기능은 입력한 값이 초기화 되는 기능힙니다.

그런데 여기서 키보드가 활성화 되어있는 상태라서 그런것 같은데. X버튼이 작동을 안합니다.

혹시 해결방법이 있을지 문의 드립니다.

해당 소스는 아래와 같습니다.

import React from ‘react’;
import { Alert, View, Text, StyleSheet, TextInput, Image, TouchableOpacity, ScrollView } from ‘react-native’;
import { observable } from ‘mobx’;
import { InputItem } from ‘antd-mobile-rn’
import { vw, vh } from ‘react-native-viewport-units’;
import { KeyboardAwareScrollView } from ‘react-native-keyboard-aware-scroll-view’

declare var jest: any;

class SearchScreen extends React.Component<any, any> {

static navigationOptions = ({ navigation }) => ({
title: ‘바로 검색’,
});

@observable query = ‘’;
@observable tracks = [];

get query() {
return this.query;
}

set query(artist: string) {
this.query = artist;
}

get tracks() {
return this.tracks;
}

set tracks(result: Array) {
this.tracks = result;
}

onTextInputChange = (value: string) => {
Alert.alert(value);
this.query = value;
}

inputRef: any;

constructor(props: any) {
super(props);
this.state = {
value: ‘’,
};
}

render(){

return (
  <View style={styles.container}>
    <KeyboardAwareScrollView>
			<View style={styles.searchInfoArea}>
				<View style={styles.searchImgArea}>
					<Image source={require('../images/search.png')} style={styles.searchImg} />
				</View>
				<View style={styles.searchTextArea}>
					<Text style={styles.searchText}>찾으실 단어를 입력하세요.</Text>
				</View>
			</View>

			<View style={styles.searchFormArea}>
				<View style={styles.iconSearcImgArea}>
					<Image source={require('../images/icon-search.png')} style={styles.iconSearchImg} />
				</View>

      <View style={styles.searchTextInputArea}>


        <InputItem
          clear
          value={this.state.value}
          onChange={(value) => this.setState({ value })}
          placeholder='바로 검색'
          style={styles.searchTextInput}
        />

				</View>




				<View style={styles.voiceButtonArea}>
					<Image source={require('../images/icon-voice.png')} style={styles.voiceButtonImg} />
				</View>

			</View>

    {false?
			<View style={styles.searchList}>
				<Text style={styles.searchResultText}>검색 결과가 없습니다.</Text>
				<Text style={styles.searchResultText}>검색 결과, 찾는 단어가 여러 과목에 있습니다.</Text>

				<View style={styles.searchResultList}>
					<View style={styles.wordTextArea}>
						<Text style={styles.wordText}></Text>
						<Text style={styles.wordTextHanja}></Text>
					</View>

					<View style={styles.subjectTextArea}>
						<Text style={styles.subjectText}></Text>
					</View>
				</View>

				<View style={styles.searchResultList}>
					<View style={styles.wordTextArea}>
						<Text style={styles.wordText}></Text>
						<Text style={styles.wordTextHanja}></Text>
					</View>

					<View style={styles.subjectTextArea}>
						<Text style={styles.subjectText}></Text>
					</View>
				</View>
			</View>:<View style={styles.noSearchList}></View>
    }
    </KeyboardAwareScrollView>
		</View>
)

}
}

export default SearchScreen;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#ffffff’,
justifyContent: ‘space-between’,
},
closeButtonImg: {
flex: 1,
resizeMode: ‘contain’,
},
searchInfoArea: {
flex: 2,
justifyContent: ‘center’,
paddingTop: 6 * vw,
paddingLeft: 8 * vw,
paddingRight: 8 * vw,
flexDirection: ‘row’,
},
searchImgArea: {
flex: 1,
height: 16 * vh,
alignItems: ‘center’,
justifyContent: ‘center’,
},
searchImg: {
flex: 1,
resizeMode: ‘contain’,
},
searchTextArea: {
flex: 2,
height: 16 * vh,
justifyContent: ‘center’,
paddingLeft: 5 * vw,
},
searchText: {
fontSize: 3.4 * vw,
color: ‘#666666’,
},
searchFormArea: {
flex: 1,
height: 8 * vh,
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
marginLeft: 5 * vw,
marginRight: 5 * vw,
borderBottomWidth: 0.3 * vw,
borderColor: ‘#808080’,
},
iconSearcImgArea: {
flex: 0.5,
height: 3 * vh,
alignItems: ‘center’,
},
iconSearchImg: {
flex: 1,
resizeMode: ‘contain’,
},
searchTextInputArea: {
flex: 4,
},
searchTextInput: {
fontSize: 4 * vw,
zIndex: 9999,
},
clearButtonImgArea: {
flex: 0.5,
height: 3 * vh,
alignItems: ‘center’,
},
clearButtonImg: {
flex: 1,
resizeMode: ‘contain’,
},
voiceButtonArea: {
flex: 0.5,
height: 5 * vh,
alignItems: ‘center’,
},
voiceButtonImg: {
flex: 1,
resizeMode: ‘contain’,
},
searchList: {
flex: 6.4,
paddingTop: 6 * vw,
paddingBottom: 6 * vw,
paddingLeft: 10 * vw,
paddingRight: 10 * vw,
marginTop: 8 * vw,
backgroundColor: ‘#ededed’,
},
noSearchList: {
flex: 6.4,
paddingTop: 6 * vw,
paddingBottom: 6 * vw,
paddingLeft: 10 * vw,
paddingRight: 10 * vw,
marginTop: 8 * vw,
backgroundColor: ‘#ffffff’,
},
searchResultText: {
fontSize: 3.4 * vw,
color: ‘#000000’,
paddingBottom: 2 * vw,
},
searchResultList: {
flexDirection: ‘row’,
justifyContent: ‘center’,
marginTop: 1 * vw,
paddingBottom: 1 * vw,
},
wordTextArea: {
flex: 5,
flexDirection: ‘row’,
},
wordText: {
fontSize: 3.4 * vw,
color: ‘#666666’,
fontFamily: ‘NotoSansCJKkr-Medium’,
lineHeight: 5 * vw,
},
wordTextHanja: {
fontSize: 3.4 * vw,
color: ‘#f15924’,
fontFamily: ‘NotoSerifCJKkr-Medium’,
lineHeight: 4 * vw,
},
subjectTextArea: {
flex: 1,
alignItems: ‘flex-end’,
},
subjectText: {
fontSize: 3.4 * vw,
color: ‘#666666’,
fontFamily: ‘NotoSansCJKkr-Medium’,
lineHeight: 5 * vw,
},
});

ScrollView의 keyboardShouldPersistTaps라는 prop을 살펴보시면 도움 되실 것 같습니다~

1 Like

남겨주신 댓글을 보고 해결 하였습니다.
감사드립니다.

1 Like