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

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

不知道这是否与ListView always scrolls back to the top in 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"}]}

}

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: "",...
        {hint: "bar",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

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

在将相同的问题发布到 NB forum后,我得到了一个有用的链接,以解决这个“错误”的方法：

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

组件/ ScreenAddInformation.js：

import React,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,Text } from 'react-native'
import { List,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

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

猜你在找的React相关文章