React Native - ScrollView，底部有滚动文本输入答案

【问题标题】：React Native - ScrollView with scrolling text input at bottomReact Native - ScrollView，底部有滚动文本输入
【发布时间】：2023-03-17 17:00:02
【问题描述】：

我正在开发一个适用于 iOS 的 react 本机移动应用程序，并试图使覆盖的 TextInput 在 ScrollView 底部保持粘性。我的第一个想法是将它移到 ScrollView 之外，这可行，但不允许组件覆盖滚动内容。

这是我的代码示例：

基本思路： <ScrollView style={styles.tabView}> <View> </View> <TextInput style={styles.input} /> </ScrollView>

我只能让它执行以下操作之一：1) 保持在底部没有覆盖和 2) 仅显示在整个滚动视图的底部。

两全其美吗？

我们将不胜感激。

谢谢。

【问题讨论】：

标签： ios react-native scrollview

【解决方案1】：

您可以将 ScrollView 和 TextInput 包装在一个容器中，然后将 TextView 设置为半透明并将其定位为“绝对”并将其粘贴到容器的底部。..

   <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue'}}>
     <View style={{height: 400, width: 400}}>                 
       <ScrollView>
         <View style={{backgroundColor: 'green'}}>
            // Your data here
         </View> 
      </ScrollView>
      <TextInput style={{backgroundColor: '#c4c4c4dd', position: 'absolute', bottom: 0, left: 0, right: 0}} />
    </View>
  </View>

你可以看到我为你准备的this example。享受吧。

【讨论】：

如果它满足您的问题，请投票并标记为答案。谢谢 :)
stackoverflow.com/users/1861047/atlanteh 我设置为答案。请原谅自从我使用堆栈溢出以来我的 comp sci 课程的延迟。他们不会让我投票，因为我还没有“声誉”。

【解决方案2】：

最好和最简单的方法是使用以下标签作为您的代码容器：

<KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{flex:1}}
    >
...
 </KeyboardAvoidingView>

【讨论】：