react-native - NativeBase(React Native)避免滚动回到顶部

Question

我正在尝试使用List组件来处理很多输入，但是请注意，输入输入后，它会一直滚动回到顶部。



不知道这是否与ListView always scrolls back to the top in react-native有关-我尝试过<List style={{flex> 1}} ..>，但没有运气。

更新

认为如果我输入一些代码，可能更容易帮助我

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方法:

  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

我也遇到了这个问题，这对我来说是一个简单的解决方法。

<Container>
    <ScrollView>{/* <- Use this rather than Content */}
      {/* form with this issue */}
    </ScrollView>
</Container>