React Native - FlatList не может достичь дна - PullRequest
Новая
       12

React Native - FlatList не может достичь дна

3 голосов
/ 06 марта 2019

У меня есть панель, на которой клавиатура всегда включена, так как я не хочу, чтобы пользователи отклоняли ее.На этой панели у меня есть FlatList, который выглядит так: 

<KeyboardAvoidingView style={{ flex: 1 }}>
      <FlatList
         // This keeps the keyboard up and disables the user's ability to hide it.
         keyboardShouldPersistTaps="handled"
         data={this.state.examples}
         keyExtractor={(item, index) => index.toString()}
         renderItem={this._renderItem}
         contentContainerStyle={{ flex: 1}}
      />
</KeyboardAvoidingView>

Пока все хорошо, я добился того, чего хотел.Однако, когда клавиатура поднята - она ​​скрывает нижнюю часть элементов, отображаемых в FlatList.И пользователи не могут прокручивать вверх и просматривать последние элементы, потому что они остаются за клавиатурой.

Как сохранить открытую клавиатуру (и отключить возможность отстранения), в то же время имея возможность просматривать и прокручивать весь контентFlatList?

Ответы [ 2 ]

2 голосов
/ 08 марта 2019

Вы можете добавить событие прослушивания клавиатуры, чтобы получить высоту клавиатуры. 

this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
  this.setState({ keyboardHeight: e.endCoordinates.height, keyboardShow: true })
  Animated.timing(this.visibleHeight, {
    duration: e.duration,
    toValue: 1,
    easing: Easing.inOut(Easing.ease)
  }).start()
})

Просмотреть код как этот 

<Animated.View style={Platform.OS === 'android' ? { flex: 1 } : {
      height: this.visibleHeight.interpolate({
        inputRange: [0, 1],
        outputRange: [height - this.NavHeaderHeight, height - this.state.keyboardHeight - this.NavHeaderHeight]
      })
    }
    } >
     /*Your FlatList*/
</Animated.View>

Я надеюсь, что это работает для вас

1 голос
/ 08 марта 2019

Я был в подобной ситуации. У меня была нижняя Плавающая кнопка Действия в правом нижнем углу, немного скрывая последний элемент.

Итак, я добавил фальшивый пустой элемент в конец списка , чтобы я мог прокрутить его немного больше.

Это просто и сложно. Я надеюсь, что это сработает и для вас, если вы добавите несколько пустых итентов или один достаточно широкий пустой элемент.

РЕДАКТИРОВАТЬ 1:

Предположим, ваш массив данных выглядит примерно так: [{title: "Item 1"}, {title: "Item 2"}]

Вы должны объединить новый пустой элемент в массив данных при передаче его в <FlatList>, например: 

<FlatList
   keyboardShouldPersistTaps="handled"
   data={this.state.examples.concat({title:"\n\n\n\n\n"})}
   keyExtractor={(item, index) => index.toString()}
   renderItem={this._renderItem}
   contentContainerStyle={{ flex: 1}}/>

Регулируйте количество «\ n» до тех пор, пока вы не сможете прокрутить список для отображения. Там должно быть минимальное количество. И убедитесь, что ваш _renderItem не устанавливает фиксированное значение высоты элемента.

...