javascript-React Native-FlatList无法到达底部

2019-11-08 06:35:42 阅读：783 来源： 互联网

标签：react-native keyboard scrollview javascript

我有一个面板,其中的键盘始终处于打开状态,因为我不希望用户将其关闭.在该面板中,我有一个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的全部内容的同时保持打开的键盘(并禁用关闭功能)？

解决方法:

您可以添加键盘监听器事件以获取键盘的高度.

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>

我希望这个对你有用

标签：react-native,keyboard,scrollview,javascript
来源： https://codeday.me/bug/20191108/2006313.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-React Native-FlatList无法到达底部