从平面列表中获取索引反应本机
get index from flatlist react native
所以我基本上是在寻找错误以及我做错了什么,
我得到了每个数据都有不同的键,我正在尝试获取 activeRow 的数据,
出于某种原因,我由于某种原因得到了未定义,这是怎么回事?谢谢!
在尝试记录 "this.props.index" 后我变得不确定 我已经调用了构造函数(道具)和超级(道具),所以我不知道为什么我要尝试记录我的道具它说未定义而不是给我索引或项目...
这是我的渲染!
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
onOpen: (secId, rowId, direction) => {
this.setState({ activeRowKey: this.props.index })
console.log(this.state.activeRowKey)
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
rowId: this.props.index,
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item,index }) => (
<Swipeout {...swipeSettings}>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}
在你试图恢复的地方this.props.index你还没有价值,但我建议将 open 和 rowid 道具传递给你的 Swipeout 并按原样恢复索引:
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item, index }) => (
<Swipeout
{...swipeSettings}
onOpen={(secId, rowId, direction) => {
this.setState({ activeRowKey: index })
console.log(this.state.activeRowKey)
}
}
rowId={index}
>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}
所以我基本上是在寻找错误以及我做错了什么, 我得到了每个数据都有不同的键,我正在尝试获取 activeRow 的数据, 出于某种原因,我由于某种原因得到了未定义,这是怎么回事?谢谢! 在尝试记录 "this.props.index" 后我变得不确定 我已经调用了构造函数(道具)和超级(道具),所以我不知道为什么我要尝试记录我的道具它说未定义而不是给我索引或项目...
这是我的渲染!
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
onOpen: (secId, rowId, direction) => {
this.setState({ activeRowKey: this.props.index })
console.log(this.state.activeRowKey)
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
rowId: this.props.index,
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item,index }) => (
<Swipeout {...swipeSettings}>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}
在你试图恢复的地方this.props.index你还没有价值,但我建议将 open 和 rowid 道具传递给你的 Swipeout 并按原样恢复索引:
render() {
const swipeSettings = {
autoClose: true,
buttonWidth: 130,
onClose: (secId, rowId, direction) => {
if (this.state.activeRowKey != null) {
this.setState({ activeRowKey: null })
}
},
right: [
{
onPress: () => {
},
text: 'Verify', type: 'default', backgroundColor: 'lime', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons name="md-checkmark" size={40} />
</View>
)
}
],
left: [
{
onPress: () => {
},
text: '', type: 'default', backgroundColor: '#e6e6e6', color: 'black', component: (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Ionicons style={{ color: 'green' }} name="ios-call" size={40} />
</View>
)
}
],
sectionId: 1
};
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
return (
<View style={{ flex: 1, backgroundColor: 'grey' }}>
<SearchBar
placeholder="Type Here..."
lightTheme
round
height={60}
onChangeText={text => this.searchFilterFunction(text)}
autoCorrect={false}
value={this.state.value}
/>
<FlatList
data={this.state.data}
renderItem={({ item, index }) => (
<Swipeout
{...swipeSettings}
onOpen={(secId, rowId, direction) => {
this.setState({ activeRowKey: index })
console.log(this.state.activeRowKey)
}
}
rowId={index}
>
<ListItem
keyExtractor={this.keyExtractor}
index={index}
titleStyle={{ textAlign: 'center', fontWeight: 'bold', color: 'black', fontSize: 20, height: 60, maxHeight: 35, justifyContent: 'center' }}
title={`${item.guestname}`}
/>
</Swipeout>
)}
keyExtractor={item => item.key}
contentContainerStyle={{ margin: 5, textAlign: 'center', }}
ItemSeparatorComponent={this.renderSeparator}
/>
<SafeAreaView style={{ height: 100, backgroundColor: '#3271e7', justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center' }}>
<Ionicons style={styles.imagestyle} size={60} name="ios-barcode" />
</TouchableOpacity>
</SafeAreaView>
</View>
);
}