Muitas vezes criamos um formulário em React Native e gostaríamos que ele tivesse funções que embora simples complementam o uso da aplicação. Uma delas é uma ScrollView que lida com a aparência do teclado e rola automaticamente para o TextInput listado. Neste artigo iremos ver como fazer isso, utilizando a biblioteca react-native-keyboard-aware-scroll-view
.
Instalando a Biblioteca -
A instalação pode ser feita através npm
e de ou yarn
:
npm i react-native-keyboard-aware-scroll-view --save
yarn add react-native-keyboard-aware-scroll-view
Iniciando o uso da Keyboard-aware-scroll-view -
Você pode usar o KeyboardAwareScrollView
, KeyboardAwareSectionList
ou os KeyboardAwareFlatList
componentes. Eles aceitam props ScrollView, SectionListe FlatListdefault respectivamente e implementam um componente personalizado de alta ordem chamado KeyboardAwareHOC
para lidar com a aparência do teclado. O componente de alta ordem também está disponível se você quiser usá-lo em qualquer outro componente.
Importe react-native-keyboard-aware-scroll-view
e envolva seu conteúdo dentro dele:
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
Rolagem automática nos campos de TextInput -
A partir de v0.1.0, o componente rola automaticamente para o foco TextInput. Para versões v0.0.7e anteriores, você pode fazer o seguinte. Para rolar para qualquer TextInputcampo, você pode usar o método interno scrollToFocusedInput
. Exemplo:
_scrollToInput (reactNode: any) {
// Add a 'scroll' ref to your ScrollView
this.scroll.props.scrollToFocusedInput(reactNode)
}
<KeyboardAwareScrollView
innerRef={ref => {
this.scroll = ref
}}>
<View>
<TextInput
onFocus={(event: Event) => {
// `bind` the function if you're using ES6 classes
this._scrollToInput(ReactNative.findNodeHandle(event.target))
}}
/>
</View>
</KeyboardAwareScrollView>
Role para qualquer posição -
Há outra função integrada que permite rolar programaticamente para qualquer posição da exibição de rolagem:
this.scroll.props.scrollToPosition(0, 0)
Você pode utilizar em ScrollViewResponder
eventos onKeyboardWillShowe
e onKeyboardWillHide
:
<KeyboardAwareScrollView
onKeyboardWillShow={(frames: Object) => {
console.log('Keyboard event', frames)
}}>
<View>
<TextInput />
</View>
</KeyboardAwareScrollView>
Espero que este artigo tenha o ajudado, e agradeço pela leitura até aqui.
Top comments (0)