更新

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 () {
    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>并且没有动态渲染。一旦键盘关闭＆＃34;视图＆＃，它仍然是问题34;滚动回到顶部。

Answer 1

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

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>
    )
  }
}

工作解决方案就在这里：

我很高兴它现在有效！ thx booboothefool

Answer 2

如果您只是在提交时隐藏键盘怎么办？尝试这样的解决方法：

<TextInput onSubmitEditing={ () => Keyboard.dismiss() }>

不要忘记从'react-native'

导入{Keyboard}

Answer 3

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

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

NativeBase（React Native）避免滚动回到顶部

更新

更新2

更新3

3 个答案: