NativeBase(React Native)避免滚动回顶部

Question

我正在尝试使用List组件来处理大量输入,但请注意它在输入输入后继续滚动到顶部.

不知道这是否与ListView有关,总是在react-native中回滚到顶部 - 我试过<List style={{flex> 1}} ..>但没有运气..

UPDATE

如果我输入一些代码,可能会更容易帮助我

import React, { Component } from 'react'
import { View } from 'react-native'
import { List, ListItem,  InputGroup, Input, Icon, Button } from 'native-base'

export default class AddInformation extends Component {
  constructor(props) {
    super(props)

    this.state = {
      items: 
[
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"},
{value: "", keyboardType: "default"}]}

}

render () {
    return (
      <List
        dataArray={this.state.items}
        renderRow={
          (obj) => {
            console.log(obj)
            return (
              <ListItem>
                <InputGroup>

                <Input
                  placeholder={`${obj.keyboardType} keyboard`}
                  onChangeText={ (text)=> {
                    //TODO
                  } }
                  keyboardType={obj.keyboardType}
                />
                </InputGroup>
              </ListItem>
            )
        }}>
      </List>
    )
  }
}

更新2

还是行不通..

import React, { Component } from 'react'
import { View, ListView, Text, TextInput } from 'react-native'
import { FormLabel, FormInput } from 'react-native-elements'

export default class AddInformation extends Component {
  constructor(props) {
    super(props)
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

  }

  componentDidMount() {
   this.state = {
      items: ds.cloneWithRows([
        {hint: "foo", value: "", keyboardType: "default"},
         ...
        {hint: "bar", value: "", keyboardType: "numeric"}
      ])
    }

  }
...

并且渲染方法:

  render () {
    return (
      <View style={{flex: 1}}>
        <ListView

          dataSource={this.state.Specifications}
          renderRow={(rowData) =>
            <View>
              <FormLabel>{rowData.hint}</FormLabel>
              <FormInput
                placeholder={`Keyboard: ${rowData.keyboardType}`}
                />
                <TextInput />
            </View>
          }/>
      </View>
    )
  }
}

不知道它是否与NativeBase布局有关..？

import React, { Component } from 'react'
import { Container, Content, Header, Title, Button, Icon } from 'native-base'
import AddInformation from './AddInformation'

export default class ScreenAddItemInformation extends Component {
  render() {
    return (
      <Container>

        <Header>
          <Button transparent onPress={ () => this.props.navigator.pop() }>
            <Icon name='ios-backspace' />
          </Button>

          <Title>Add New Item</Title>

        </Header>

        <Content>
          <AddInformation />
        </Content>

      </Container>
    );
  }
}

更新3

我刚尝试使用<List>硬编码的NB <ListItem>并且没有动态渲染..这仍然是一旦键盘下降,"视图"滚动回到顶部的问题.

Answer 1

在将相同的问题发布到NB 论坛后，我得到了解决此“错误”的方法的有用链接：

https://github.com/GeekyAnts/NativeBase/issues/339

组件/ScreenAddInformation.js：

import React, { Component } from 'react'
import { Container, Content, Header, Title, Button, Icon } from 'native-base'
import Information from './Information'

export default class ScreenAddInformation extends Component {
  constructor(props) {
    super(props)    
    this.state = {scrollY: 0}
  }

handleScroll(event) {
    this.setState({ scrollY: event.nativeEvent.contentOffset.y });
  }

  render() {
    _.set(this.refs, 'Content._scrollview.resetCoords', { x: 0, y: this.state.scrollY });
    return (
      <Container>

        <Header>
          <Button transparent onPress={ () => this.props.navigator.pop() }>
            <Icon name='ios-backspace' />
          </Button>

          <Title>Add New Information</Title>

        </Header>

        <Content
          ref="Content"
          onScroll={event => this.handleScroll(event)}
          >
          <AddInformation />
        </Content>

      </Container>
    );
  }
}

组件/AddInformation.js：

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { List, ListItem, InputGroup, Input } from 'native-base'

export default class AddInformation extends Component {
  render () {
    return (
      <List>
        <ListItem itemDivider>
          <Text>Information to add</Text>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
        <ListItem >
          <InputGroup borderType="underline">
            <Input stackedLabel label="Foo" />
          </InputGroup>
        </ListItem>
        <ListItem>
          <InputGroup borderType="underline">
            <Input stackedLabel label="Bar" />
          </InputGroup>
        </ListItem>
      </List>
    )
  }
}

工作解决方案在这里：

我很高兴它现在有效了！谢谢，傻瓜