TransWikia.com

Função Keyboard.dismiss() não funciona

Stack Overflow em Português Asked by Wander on November 25, 2021

Estou tentando fazer com que o teclado virtual desapareça quando pressionado qualquer parte da tela no React Native, porém não funciona.

Já tentei colocar esta função nas views, texts e até mesmo criar uma constante por fora com TouchableWithoutFeedback, mas nada, o que posso fazer?

export default function StatusFile() {
const searchBar = React.createRef();
const [search, setSearch] = useState('');

return(
    <View style={styles.container} onPress={**() => Keyboard.dismiss()**}>
        <ScrollView style={styles.scroll}>
            <SearchBar 
                text={search}
                ref={searchBar}
                placeholder='Procurar...'
                barStyle='black'    
                textFieldBackgroundColor='#FF8C00'
                onChangeText={setSearch}
                onSearchButtonPress={() => searchBar.current.blur()}
            />

            {search !== '' ?  
            statusFile.filter(a => a.toLowerCase().indexOf(search.toLowerCase()) !== -1).map(a => (
                <Text style={styles.texto} key={a}>
                    {a}
                </Text>
            ))
            : 
            <Text style={styles.texto}>Faça uma busca pelo status, EX: 10</Text>
            }  
        </ScrollView>
    </View>
);

One Answer

O elemento <View> não possui uma propriedade onPress. Você pode remover a <View> e utilizar apenas a <ScrollView>, ocupando a tela inteira.

A propriedade keyboardShouldPersistTaps da <ScrollView> determina quando o teclado deve permanecer visível após um toque. Os valores possíveis são:

  • 'never': É o comportamento padrão. Tocar fora de uma entrada de texto faz com que o teclado seja fechado e o componente tocado não receba o toque. Por exemplo, se o teclado estiver aberto e um botão for tocado, o teclado é fechado e nada mais acontece.

  • 'always': O teclado não será fechado automaticamente e a <ScrollView> não capturará toques, mas os filhos poderão capturá-los. Por exemplo, se o teclado estiver aberto e um botão for tocado, o teclado permanece aberto e o botão executará o onPress.

  • 'handled': O teclado não será fechado automaticamente quando o toque for capturado por filhos da <ScrollView> (ou se o toque for capturado por um ancestral). Caso o toque não seja capturado por nenhum elemento, o teclado é fechado.

No seu caso, 'never' ou 'handled' podem servir, a depender do seu comportamento desejado. Por exemplo:

<ScrollView style={styles.scroll} keyboardShouldPersistTaps='handled'>
  // ...
</ScrollView>

Answered by Rafael Tavares on November 25, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP