๊ฐœ๋ฐœ ๐Ÿพ/React Native

TextInput ์ž…๋ ฅ์‹œ Keyboard ์ฐฝ ๋‹ซ๊ธฐ

JOTOKKI 2022. 7. 16. 22:59
728x90

์ž…๋ ฅ์„ ํ•ด์•ผํ•˜๋Š” ํ™”๋ฉด์—์„œ TextInput์— focus ๊ฐ€ ๋˜๋ฉด 

์ž๋™์œผ๋กœ Keyboard๊ฐ€ ์˜ฌ๋ผ์˜ค๋Š”๋ฐ, ์•„๋ฌด๊ณณ์ด๋‚˜ ํด๋ฆญํ–ˆ์„๋•Œ ์ด๋ฅผ ๋‹ค์‹œ ๋‚ด๋ ค๊ฐ€๊ฒŒ ํ•˜๊ณ ์‹ถ๋‹ค.

TouchableWithoutFeedback, Keyboard ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. \

 

ํ•ด๋‹น ๋ถ€๋ถ„์„ ๋‚ด๋ฆฌ๊ณ  ์‹ถ๋‹ค!

 

TouchableWithoutFeedback ํƒœ๊ทธ๋กœ ์ „์ฒด ์˜์—ญ์„ ๊ฐ์‹ผ๋˜ onPress ํ•จ์ˆ˜์— Keyboard.dismiss() ํ•จ์ˆ˜๋งŒ ํ˜ธ์ถœํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด์ œ๋œ๋‹ค.

 

์˜ˆ์ œ์ฝ”๋“œ)

return (  
    <TouchableWithoutFeedback onPress={() => {
      console.log('dismissed keyboard')
      Keyboard.dismiss()
    }}>
      <View style={styles.container}>
        <Header/>
        <TextInput
            style={styles.input} 
            placeholder='Write something...'
            onChangeText={chageHandler}
        />
      </View>
    </TouchableWithoutFeedback>
  );
}

์ƒ๊ฐ๋ณด๋‹ค ์ •๋ง ๊ฐ„๋‹จํ•˜๋‹ค.

 

์Šต๊ด€์ ์œผ๋กœ javascript๋กœ๋งŒ ํ•ด๊ฒฐํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ... ๊ทธ๋ƒฅ ์›ฌ๋งŒํ•˜๋ฉด ๋‹ค ๋ถˆ๋Ÿฌ์˜ค๋ฉด ๋œ๋‹ค. ํ—ˆํ—ˆ ๋จธ์“ฑ์ฝ”์“ฑ๐Ÿ™„

 

๋ฐ˜์‘ํ˜•