React Native - 底部带有滚动文本输入的 ScrollView

Question

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

这是我的代码示例：

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

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

两全其美吗？

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您可以将 ScrollView 和 TextInput 包裹在一个容器中，然后将 TextView 设置为半透明并定位 'absolute' 并将其粘贴到容器底部..

   <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。享受吧。

Answer 2

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

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

React Native - 底部带有滚动文本输入的 ScrollView

React Native - ScrollView with scrolling text input at bottom

scrollview

ios

react-native