React Native 输入不在屏幕上

Question

我正在尝试在我的项目屏幕底部实现一个输入字段，但是我的代码中的某些内容禁止这种情况发生。

我的代码如下：

<View style={{ flexDirection: 'column', marginTop:-30,}}>
    //This is where my 'header' is
    <ScrollView 
      ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
    }}
    style={{ marginBottom: 150}}>
//Objects in my ScrollView will be here
    </ScrollView>
<View style={{flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end'}}>
      <Input
      containerStyle={{
                      backgroundColor: 'rgba(0, 162, 255, 1)'
                    }}
  placeholder='Enter Text Here'
  leftIcon={
    <Icon
      name='add'
      type='material'
      size={24}
      color='white'
    />
  }

/>
</View>
</View>

稍微解释一下：我的 ScrollView 的 marginBottom 为 150，因为出于某种原因，如果没有它，我的屏幕将不会显示整个 ScrollView；它的某些部分被截断了屏幕，如果我一直向下滚动，一些对象就会被截断。

Answer 1

尝试像这样设置 Input 的绝对位置：

<View style={{ flexDirection: 'column', marginTop:-30,}}>
    //This is where my 'header' is
    <ScrollView 
      ref={ref => this.scrollView = ref}
      onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});
      }}
      style={{ marginBottom: 150}}>
      //Objects in my ScrollView will be here
    </ScrollView>
    <View style={{ position: 'absolute', bottom: 30 }}>
      <Input
        containerStyle={{
          backgroundColor: 'rgba(0, 162, 255, 1)'
        }}
        placeholder='Enter Text Here'
        leftIcon={
          <Icon
            name='add'
            type='material'
            size={24}
            color='white'
          />
          }
      />
    </View>
</View>

React Native 输入不在屏幕上

React Native Input is off screen

input

scrollview

react-native