native固定吸顶 react_React Native固定底部TextInput，解决键盘遮挡、列表滚动问题

效果图

timer.gif

做类似于微信聊天输入框，可能会遇到下面三个小困扰，记录一下。

目录

# 1、React Native固定底部TextInput

# 2、键盘遮挡问题

# 3、列表滚动问题

困扰 1、React Native固定底部TextInput

react-native 没有fixed

核心方案:

- 最外部的包裹, flexDriction 默认的竖直

- 中间是滚动层 flex: 1,(ScrollView可以不加flex: 1, 其他组价没测试,)

- 最下面的组件 固定高度

这是中间的滚动页面 (flex: 1)

页面展示在这个组件中

style={styles.inputView}

returnKeyType="send"

placeholder="请输入消息"

/>

困扰2、键盘遮挡问题

有多种方案：

KeyboardAvoidingView

最简单、最容易安装使用的方法是 KeyboardAvoidingView。这是一个核心组件，同时也非常简单。

你要做的第一件事是用 KeyboardAvoidView 替换 View，然后给它加一个 behavior 的 prop。查看文档的话你会发现，他可以接收三个不同的值作为参数 —— height， padding， position。我发现 padding 的表现是最在我意料之内的，所以我将使用它

ren