Question

我对React Native聊天应用感到疯狂。我需要典型的app结构：listView（我也试过FlatList甚至是ScrollView）和底部的textInput。当我专注于输入时，listView被键盘覆盖，我无法看到我正在键入的内容。

我尝试了许多方法，但它们都没有像我预期的那样工作：我使用KeyboardAvoidingView并尝试使用KeyboardAwareScrollView和KeyboardSpacer，但每次都会出现一个错误：当我专注于输入时，列表会在动画期间被切割，当我点击输入外部时，底部会有一个空白区域（获取当我轻轻滚动列表时修复）。也许我使用了糟糕的结构：

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

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

或将Header，ListView和InputContainer放入KeyBoardAvoidingView中，行为=＆＃34;填充＆＃34;或其他设置。我基本上都尝试了一切。

我试图避免天才聊天，因为我必须对其进行自定义并且记录得很糟糕。：（

Answer 1

您可以使用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>

Answer 2

先从原生基地取容器
使用 [ scroll enabled = true ] 从原生库获取内容
在内容中只放置 2 个带有 flex 1 或 flex 2 的视图
在 1 个视图中将内容放入视图
最后有一些内容属性，只需添加它们

showsVerticalScrollIndicator={false} 启用Android AutomaticAdjustContentInsets={false} keyboardShouldPersistTaps="总是" 额外高度={250}
完成

这里是设计结构

<Container>

<Content>

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

<View>
view 2
</View>

React native chat：listView在键盘上调整大小

2 个答案: