我正在尝试使用列表组件来处理大量输入,但注意到在输入后它会不断滚动回顶部。
我不知道这是否与React Native中的ListView总是回滚到顶部有关 - 我尝试过<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>
和没有动态渲染的<ListItem>
,但问题仍然存在,一旦键盘关闭,“视图”就会滚回到顶部。
rowHasChanged
,以便它不会重新渲染已经渲染过的行? - Tudor Constantin