打开键盘时使 react-native-autocomplete-input 可见

Question

我使用react-native-autocomplete-input 组件，它位于屏幕底部，但我不知道如何在打开键盘时显示结果列表。我尝试使用ScrollView 和react-native-keyboard-spacer 组件，但结果列表在键盘后面。

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 方面做得很好，但它有很多问题，正如 here 所提到的，特别是在 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>