NativeBase（React Native）避免滾動回到頂部

Question

我正在嘗試使用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"}, 
{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

我只是嘗試了用硬一NB <List>編碼<ListItem>並沒有動態渲染。它仍然是，一旦鍵盤出現故障「查看」滾動回頂部的問題。

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

不要忘了從「反應母語」