反应本机聊天：在键盘上调整listView大小

我对React原生聊天应用程序越来越着迷了。 我需要典型的应用程序结构：一个listView（我也尝试了FlatList甚至ScrollView）和底部的textInput。 当我专注于输入时，listView被键盘覆盖，我看不到我正在输入什么

我尝试了很多方法，但都没有达到我的预期效果： 我使用了KeyboardAvoidgView，也尝试了KeyboardawarScrollView和KeyboardSpacer，但每次我都会遇到一个错误：当我在动画中关注输入时，列表会被剪切，当我在输入之外单击时，底部有一个空白（当我轻轻滚动列表时，它会被修复）。 也许我使用了一个糟糕的结构：

<View style={{ flex: 1 }}>
  <Header />
  <ListView style={{ flex: 1 }} ...... />
  <InputContainer />

  <!-- here I tried to put -->
  <KeyboardSpacer>
</View>

或者使用behavior=“padding”或其他设置将标题、ListView和InputContainer放在键盘内以避免出现gView。我基本上什么都试过了

---

我尽量避免使用天才聊天，因为我必须自定义它，而且它的文档记录也很糟糕（

您可以使用Keyboard.addListener方法实时修改容器的高度

<Animated.View style={Platform.OS === 'android' ? {flex: 1} : {
   height: this.visibleHeight.interpolate({
   inputRange: [0, 1],
    outputRange: [
        height - (Define.system.ios.x ? 88 : 64), keyboardShow
          ? height - keyboardHeight - (Define.system.ios.x ? 88 : 64)
          : height - (Define.system.ios.x ? 112 : 64) - 240]
    })
  }
  } >

     <View style={{ flex: 1 }}>
      <ListView  ...... />
     </View
    <InputContainer />
</Animated.View>

首先从本机基址获取容器


使用[scroll enabled=true]从本机数据库获取内容


在内容中，只需使用flex 1或flex 2放置两个视图


在1视图中，将内容放入视图中


最后是内容的一些属性，只需添加它们即可

showsVerticalScrollIndicator={false}
促性腺激素
automaticallyAdjustContentInsets={false}
键盘应为PersistTaps=“始终”
超高={250}


完成


这是设计结构

<Container>

<Content>

<View>
<Contnet>
</Content>
</View>

<View>
view 2
</View>


视图2