Делаем реакцию-нативный-автозаполнение ввода видимой, когда клавиатура открыта

Question

Я использую реагирующий-авто-автозаполнение-ввод компонент, который внизу экрана , но я не знаю, как сделать список результатов видимым при открытой клавиатуре,Я пытался использовать компоненты ScrollView и реагировать на родную клавиатуру-проставку , но список результатов находится за клавиатурой.

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  Platform,
  TouchableOpacity,
  Text,
} from 'react-native';
import styles from './styles';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import Autocomplete from 'react-native-autocomplete-input';

const API = 'https://swapi.co/api';

class Container extends Component {
  constructor(props) {
    super(props);

    this.state = {
      query: '',
    };
  }

  componentDidMount() {
    fetch(`${API}/films/`)
      .then(res => res.json())
      .then((json) => {
        const { results: films } = json;
        this.setState({ films });
      });
  }

  findFilm(query) {
    if (query === '') {
      return [];
    }

    const { films } = this.state;
    const regex = new RegExp(`${query.trim()}`, 'i');
    return films.filter(film => film.title.search(regex) >= 0);
  }

  render() {
    const { query } = this.state;
    const films = this.findFilm(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollView}>
          <Autocomplete
            autoCapitalize="none"
            autoCorrect={false}
            containerStyle={styles.autocompleteContainer}
            data={films.length === 1 && comp(query, films[0].title) ? [] : films}
            defaultValue={query}
            onChangeText={text => this.setState({ query: text })}
            placeholder="Enter Star Wars film title"
            renderItem={({ title, release_date }) => (
              <TouchableOpacity onPress={() => this.setState({ query: title })}>
                <Text style={styles.itemText}>
                  {title} ({release_date.split('-')[0]})
                </Text>
              </TouchableOpacity>
            )}
          />
        </ScrollView>
        {Platform.OS === 'ios' ? <KeyboardSpacer /> : null}
      </View>
    );
  }
}

export default Container;

export default styles = StyleSheet.create({
  container: {
    flex: 1,
    fontFamily: 'proxima_nova_regular',
    alignSelf: 'stretch',
  },
  scrollView: {
    alignSelf: 'stretch',
    flex: 1,
  },
  autocompleteContainer: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: 400,
  },
  itemText: {
    fontSize: 15,
    margin: 2,
  },
});

Answer 1

Учитывая ваш случай, вам потребуется react-native-keyboard-aware-scroll-view

Хотя React Native проделал хорошую работу по реализации KeyboardAvoidingView, но у него есть много проблем, как упоминалось здесь , особенно в ScrollView, где это делает дополнительный провал на дне

А поскольку содержимое элементов списка может быть динамическим, поэтому необходимо заключить их в ScrollView.

Вот изменения, которые вы можете сделать в своем коде.

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView
    innerRef={ref => this.scrollView = ref} //... Access the ref for any other functions here
    contentContainerStyle={{flex: 1}}>
    <Autocomplete
        onFocus={() => {this.scrollView.props.scrollToEnd({animated: true})}} // ... Scroll To End on TextInput focus
        autoCapitalize="none"
        autoCorrect={false}
        containerStyle={styles.autocompleteContainer}
        data={films.length === 1 && comp(query, films[0].title) ? [] : films}
        defaultValue={query}
        onChangeText={text => this.setState({ query: text })}
        placeholder="Enter Star Wars film title"
        renderItem={({ title, release_date }) => (
            <TouchableOpacity onPress={() => this.setState({ query: title })}>
                <Text style={styles.itemText}>
                    {title} ({release_date.split('-')[0]})
                </Text>
            </TouchableOpacity>
        )}
    />    
</KeyboardAwareScrollView>