React Native:响应式ScrollView

时间:2017-06-08 04:59:18

标签: react-native scrollview textinput

使用RN 0.45,适用于iOS和Android:

我试图创建一个类似于"回复"的视图。 reddit应用程序的视图,我认为如下:

  • 标题(文字)是静态的
  • 在标题下方,输入(TextInput)增长/缩小到内容的大小
  • 封装两个,滚动视图(ScrollView)的静态高度位于键盘顶部上方

example picture

将这个视图放在一起时,我遇到了麻烦

我的代码的简单版本或多或少看起来像这样,虽然这并没有达到我想要的效果,因为TextInput在scrollview中滚动而不是滚动视图:

<ScrollView style={{height: 200}}>
  <Text>Header Text</Text>
  <TextInput
    multiline
    underlineColorAndroid={'transparent'}
    autoCapitalize='none'
    autoFocus
    editable
  />
</ScrollView>

我正在寻找一种方法

  1. 动态调整scrollview中的TextInput
  2. 当光标位于scrollview可见部分底部的TextInput内,并且用户键入了创建新行的内容时,scrollview将切换为显示新文本行
  3. 当光标位于TextInput的中间并创建一个新行时,滚动视图不会移动
  4. 我想知道在另一个应用中是否存在此类视图的示例,或者人们用来创建此类视图的方法,特别是如果它与我尝试的方法不同出去或使用为这种东西制作的图书馆!

    编辑:使用AutoGrowingTextInput的另一次尝试,但整体用户体验并没有像预期的那样在文本输入区域的中间创建一条线,导致ScrollView一直滚动到结束 -

        <ScrollView
          style={{ height: 240 }}
          ref={(scrollView) => { this.scrollView = scrollView; }}
          contentContainerStyle={{ flexGrow: 1 }}
          onContentSizeChange={() => {
            this.scrollView.scrollToEnd();
          }}
        >
          <Text>Header Text</Text>
          <AutoGrowingTextInput
            multiline
            underlineColorAndroid={'transparent'}
            autoCapitalize='none'
            autoFocus
            editable
          />
        </ScrollView>
    

0 个答案:

没有答案