Question

我试图在项目屏幕的底部实现一个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={{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>

反应本机输入不在屏幕上

1 个答案: