我们已在应用中实现了Flatlist，Flatlist有一个标头（即一个又一个Flatlist）。应该从清单中选择的项目应该在带有4个自定义选择器（使用视图和模式创建）的标题中看到。
单击某项时，平面列表滞后，看不到平滑的滚动 在此先感谢您还实施了onendreached加载了30多个数据。
FlatList组件：
<FlatList keyboardShouldPersistTaps={'handled'} data= .
{this.props.data} contentContainerStyle={{ alignItems: 'flex-
start', flexDirection: 'column' }}
ListHeaderComponent={
<AboveViewList
deleteSelectedRow={(index, val) =>
this.props.deleteSelectedRow(index, val)}
handleOpenCamera={(rowId) =>
this.props.handleOpenCamera(rowId)
}
PickerSelected={(value, id) =>
this.props.PickerSelected(value, id)}
data={this.props.data1}
header={this.props.header}
isAboveViewloaded={this.props.isAboveViewloaded}
/>
}
renderItem={({ item, secId, index, rowMap }) => <SwipeRow
style={{ padding: 0, height: 50, borderBottomWidth: 1,
borderBottomColor: "#ebebeb" }}
leftOpenValue={0} rightOpenValue={-100}
body={
<TouchableOpacity key={index} onPress={() =>
this.props.addRow(item, index)} style={{ width: '100%', height:
50,
justifyContent: 'center' }}>
<Text style={{ paddingLeft: 20, fontSize: 18,
alignSelf: 'flex-start', color: "#404040", }}>{item}</Text>
</TouchableOpacity>
}
right={
<Button key={index} full danger onPress={_ =>
this.props.deleteRow(index, "nameData")}>
<View style={{ flexDirection: 'row',
paddingLeft: 10 }}>
<Image source={deleteicon} style={{
resizeMode: 'contain', width: 15, height: 50, }}></Image>
<Text style={{ alignSelf: 'center', width:
'auto' }}>Remove</Text>
</View>
</Button>
}
/>}
initialNumToRender={10}
ListFooterComponent={this.renderFooter()}
keyExtractor={(item, i) => i}
maxToRenderPerBatch={10}
//refreshing={self.state.refreshing}
onEndReached={() => {
!self.props.onEndReachedCalledDuringMomentum &&
self.props.dispatch51(self.props.data.length)
}
}
onMomentumScrollBegin={() => {
self.onEndReachedCalledDuringMomentum = false; }}
onEndThreshold={0.5}
/>
标题组件
class AboveViewList extends React.PureComponent {
shouldComponentUpdate(nextProps, nextState) {
if (this.props.isAboveViewloaded) {
return false;
} else {
return true;
}
}
aboveViewExam(data, rowid) {
return <View style={{ paddingBottom: 10 }}>
<Text>{this.header == 'Examination/Findings' ?
data.DataType + " " + data.Unit : data.DataType}</Text>
</View>
}
aboveViewChief(data, rowId) {
return <View>
{
data.Value != '' ?
<Text style={{ paddingLeft: 55, paddingTop: 2,
paddingBottom: 15, fontSize: 14, color: '#575757' }}>Since <Text
style={{ paddingBottom: 15, fontSize: 14, color: '#575757' }}> .
{data.Value}</Text></Text>
:
data.Value == '' && <View style= .
{styles1.modalpickercontainer}>
<CPicker label={"Hours"} type={1} data={data}
rowid={rowId} pickerSelected={(value, id) =>
this.props.PickerSelected(value, id)} />
<CPicker label={"Days"} type={2} data={data}
rowid={rowId} pickerSelected={(value, id) =>
this.props.PickerSelected(value, id)} />
<CPicker label={"Months"} type={3} data={data}
rowid={rowId} pickerSelected={(value, id) =>
this.props.PickerSelected(value, id)} />
<CPicker label={"Years"} type={4} data={data}
rowid={rowId} pickerSelected={(value, id) =>
this.props.PickerSelected(value, id)} />
</View>
}
</View>
}
aboveViewInvest(data, rowId) {
return <View style={{ paddingBottom: 10, paddingLeft: 45,
flexDirection: 'row' }}>
{
data.Upload.length == 0 ?
<Text style={{ paddingTop: 10, fontSize: 16,
color: '#575757' }}>{data.DataType + " " + data.Unit}</Text>
:
<>
{
data.Upload.map((data1, rowId) => {
return (
<View style={{ flexDirection:
'column', left: 10, borderColor: '#efefef', borderWidth: 1 }}>
<Image source={{ uri: "" +
data1.image }} style={{ resizeMode: 'contain', height: 80,
width:
60 }} />
</View>
);
})
}
<TouchableOpacity onPress={() =>
this.props.handleOpenCamera(rowId, data)}>
<Image source={addicon} style={{
resizeMode: 'contain', height: 80, left: 10, width: 60 }} />
</TouchableOpacity>
</>
}
</View>
}
aboveViewWithValues(data, rowId) {
return <View style={{ flexDirection: 'row', paddingLeft: 10,
paddingRight: 10, paddingTop: 10 }}>
<View style={{ flex: 1, backgroundColor: '#fff',
alignSelf: 'center' }}>
<View style={styles1.wvalues}>
<Text style={{ alignSelf: 'center' }}>{rowId + 1}
. </Text>
</View>
</View>
<View style={{ flex: 5 }}>
<Text style={{ fontSize: 18 }}>{data.Name || data} .
</Text>
</View>
<TouchableOpacity onPress={() =>
this.props.deleteSelectedRow(rowId, "selectedData")} style={{
flex: 1, alignSelf: 'center' }}>
<Image source={cancelselicon} />
</TouchableOpacity>
</View>
}
render() {
const { data, label } = this.props
return <FlatList keyboardShouldPersistTaps={'handled'} data= .
{this.props.data} contentContainerStyle={{ alignItems: 'flex-
start',
flexDirection: 'column', flex: 1 }}
renderItem={({ item, index }) =>
<View style={{ borderBottomWidth: 1,
borderBottomColor: '#e8e8e8', flexDirection: 'column', alignSelf:
'stretch', width: Dimensions.get('window').width, }}>
{
this.props.header == 'Chief Complaints' ?
<View>
<View>{this.aboveViewWithValues(item,
index)}</View>
<View>{this.aboveViewChief(item, index)} .
</View>
</View> :
this.props.header ==
"Examination/Findings" ? <View>
<View>{this.aboveViewWithValues(item,
index)}</View>
<View>{this.aboveViewExam(item,
index)}</View>
</View> :
this.props.header == "Investigation
Inputs" ? <View>
<View> .
{this.aboveViewWithValues(item, index)}</View>
<View>{this.aboveViewInvest(item,
index)}</View>
</View> : <View style={{
flexDirection: 'row', padding: 10 }}>
<View style={{ flex: 1,
backgroundColor: '#fff', alignSelf: 'center' }}>
<View style= .
{styles1.wvalues}>
<Text style={{
alignSelf: 'center' }}>{++index}</Text>
</View>
</View>
<View style={{ flex: 5 }}>
<Text style={{ fontSize:
18 }}>{item}</Text>
</View>
<TouchableOpacity onPress={()
=> this.props.deleteSelectedRow(--index, "selectedData")} style=
. {{
flex: 1, alignSelf: 'center' }}>
<Image source= .
{cancelselicon} style={{ height: 20, width: 20, alignSelf:
'center'
}}
/>
</TouchableOpacity>
</View>
}
</View>
}
//initialNumToRender={10}
//ListFooterComponent={this.renderFooter()}
keyExtractor={(item, i) => i}
//onMomentumScrollBegin={() => {
self.onEndReachedCalledDuringMomentum = false; }}
//onEndThreshold={100}
/>;
}
}
When screen loads flatlist get 20 items from an array of 500-600 items,
加载20个项目后，我立即单击其中一个项目，选择该元素大约需要2秒钟以上的时间。相同，但是如果我们在20个项目完成绑定按钮后单击并单击并选择项目则可以正常工作。