NativeBase (React Native) vermeiden Scrollen nach oben

Question

Ich versuche, die List-Komponente verwenden, um eine Menge Eingaben zu verarbeiten, aber beachten Sie, dass es nach Eingabe der Eingabe nach oben zurück scrollt.

Sie wissen nicht, ob dies zu ListView always scrolls back to the top in react-native verwandt ist - Ich habe versucht, <List style={{flex> 1}} ..> aber kein Glück ..

UPDATE

dachte, es könnte leichter sein, mir zu helfen, wenn ich werfe in einigen Code

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

UPDATE 2

noch nicht funktioniert ..

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

    } 
... 

Und die Render-Methode:

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

Weiß nicht, ob es etwas mit dem NativeBase Layout zu tun hat ..?

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

UPDATE 3

Ich habe gerade versucht, mit einem NB <List> harten <ListItem> und keinem dynamischen Rendering codierte out .. Es ist immer noch das Problem, dass, wenn die Tastatur an die Spitze der „Ansicht“ blättert geht wieder nach unten .

Answer 1

Nach der gleichen Frage zu NB forum veröffentlichen, ich eine nützliche Verbindung zu einem Weg kam zu lösen diese "Fehler":

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

Komponenten/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> 
    ); 
    } 
} 

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

Und die Arbeitslösung ist hier:

Ich bin so froh, dass es jetzt funktioniert! thx booboothefool

Answer 2

Was passiert, wenn Sie einfach die Tastatur beim Senden verbergen? Versuchen Sie, eine Abhilfe wie folgt aus:

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

Vergessen Sie nicht, {} Tastatur importieren von ‚reagieren-native‘