I want to achieve scroll to index on button(previous/Next) action of horizontal FlatList.
So i have added ref in flat list but it gives error
Code:
import React, { Component } from "react";
import {
View,
Text,
FlatList,
Dimensions,
Button,
TouchableOpacity
} from "react-native";
const { height, width } = Dimensions.get("window");
class AnswerView extends Component {
render() {
return (
<View style={{
width: width/2,
height: 60,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch"
}}>
<View style={{
flex: 1,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4,
marginLeft: (this.props.index % 2 != 0) ? 8 : 16,
marginRight: (this.props.index % 2 == 0) ? 8 : 16,
marginTop: 14
}}>
<Text> Index: {this.props.index} & Item: {this.props.item} </Text>
</View>
</View>
)
}
}
class AssessmentListItem extends Component {
constructor(props) {
super(props);
this.state = {
answers: [1, 2, 3, 4, 5, 6, 7]
};
}
renderAnswer = ({ item, index }) => {
return <AnswerView item={item} index={index}/>;
};
render() {
return (
<View
style={{
width: width,
height: '100%',
justifyContent: "center",
alignItems: "center"
}}
>
<View style={{
width: "100%",
height: 100,
backgroundColor: "#ffffff",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
}}>
<Text style={{
marginLeft: 16,
fontSize: 18,
fontWeight: "600"
}}> {this.props.item}: All health problems I have had: ?? </Text>
</View>
<FlatList style={{
width: "100%",
height: "100%",
backgroundColor: "#ffffff"
}}
data={this.state.answers}
renderItem={this.renderAnswer}
numColumns={2}
keyExtractor={(id, index) => index.toString()}
/>
</View>
);
}
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [1, 2]
};
}
renderItem = ({ item, index }) => {
return <AssessmentListItem item={item} />;
};
onPressPrevious() {
this.flatListRef.scrollToIndex({ animated: true, index: 0 });
};
onPressNext() {
this.flatListRef.scrollToIndex({animated: true, index: 1});
};
// TODO: HERE
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
ref={ref => {
this.flatListRef = ref;
}}
style={{ flex: 1 }}
data={this.state.images}
horizontal
pagingEnabled={true}
legacyImplementation={false}
keyExtractor={(id, index) => index.toString()}
renderItem={this.renderItem}
{...this.props}
/>
<View
style={{
width: "100%",
height: 110,
flexDirection: "row",
justifyContent: "center",
alignItems: "stretch",
backgroundColor: "#ffffff",
shadowColor: "#000000",
shadowOpacity: 0.05,
shadowRadius: 5,
shadowOffset: {
height: -1,
width: 0
}
}}
>
<TouchableOpacity
style={{
flex: 1,
height: 48,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginLeft: 16,
marginTop: 14,
marginRight: 16,
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4
}}
onPress={this.onPressPrevious}
>
<Text style={{
color: "#00E2B2",
fontSize: 16,
fontWeight: "700"
}}>PREVIOUS</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
height: 48,
backgroundColor: "#00E2B2",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginRight: 16,
marginTop: 14,
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4
}}
onPress={this.onPressNext}
>
<Text style={{
color: "#ffffff",
fontSize: 16,
fontWeight: "700"
}}>NEXT</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
Stack Trace:
undefined is not an object (evaluating 'this.refs.flatListRef')
onPressPrevious
App.js:113:16
I have taken Referencce from here:
Let me know what i'm missing??
I want to achieve scroll to index on button(previous/Next) action of horizontal FlatList.
So i have added ref in flat list but it gives error
Code:
import React, { Component } from "react";
import {
View,
Text,
FlatList,
Dimensions,
Button,
TouchableOpacity
} from "react-native";
const { height, width } = Dimensions.get("window");
class AnswerView extends Component {
render() {
return (
<View style={{
width: width/2,
height: 60,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "stretch"
}}>
<View style={{
flex: 1,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4,
marginLeft: (this.props.index % 2 != 0) ? 8 : 16,
marginRight: (this.props.index % 2 == 0) ? 8 : 16,
marginTop: 14
}}>
<Text> Index: {this.props.index} & Item: {this.props.item} </Text>
</View>
</View>
)
}
}
class AssessmentListItem extends Component {
constructor(props) {
super(props);
this.state = {
answers: [1, 2, 3, 4, 5, 6, 7]
};
}
renderAnswer = ({ item, index }) => {
return <AnswerView item={item} index={index}/>;
};
render() {
return (
<View
style={{
width: width,
height: '100%',
justifyContent: "center",
alignItems: "center"
}}
>
<View style={{
width: "100%",
height: 100,
backgroundColor: "#ffffff",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
}}>
<Text style={{
marginLeft: 16,
fontSize: 18,
fontWeight: "600"
}}> {this.props.item}: All health problems I have had: ?? </Text>
</View>
<FlatList style={{
width: "100%",
height: "100%",
backgroundColor: "#ffffff"
}}
data={this.state.answers}
renderItem={this.renderAnswer}
numColumns={2}
keyExtractor={(id, index) => index.toString()}
/>
</View>
);
}
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [1, 2]
};
}
renderItem = ({ item, index }) => {
return <AssessmentListItem item={item} />;
};
onPressPrevious() {
this.flatListRef.scrollToIndex({ animated: true, index: 0 });
};
onPressNext() {
this.flatListRef.scrollToIndex({animated: true, index: 1});
};
// TODO: HERE
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
ref={ref => {
this.flatListRef = ref;
}}
style={{ flex: 1 }}
data={this.state.images}
horizontal
pagingEnabled={true}
legacyImplementation={false}
keyExtractor={(id, index) => index.toString()}
renderItem={this.renderItem}
{...this.props}
/>
<View
style={{
width: "100%",
height: 110,
flexDirection: "row",
justifyContent: "center",
alignItems: "stretch",
backgroundColor: "#ffffff",
shadowColor: "#000000",
shadowOpacity: 0.05,
shadowRadius: 5,
shadowOffset: {
height: -1,
width: 0
}
}}
>
<TouchableOpacity
style={{
flex: 1,
height: 48,
backgroundColor: "#ffffff",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginLeft: 16,
marginTop: 14,
marginRight: 16,
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4
}}
onPress={this.onPressPrevious}
>
<Text style={{
color: "#00E2B2",
fontSize: 16,
fontWeight: "700"
}}>PREVIOUS</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
height: 48,
backgroundColor: "#00E2B2",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
marginRight: 16,
marginTop: 14,
borderWidth: 1,
borderColor: "#00E2B2",
borderRadius: 4
}}
onPress={this.onPressNext}
>
<Text style={{
color: "#ffffff",
fontSize: 16,
fontWeight: "700"
}}>NEXT</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
Stack Trace:
undefined is not an object (evaluating 'this.refs.flatListRef')
onPressPrevious
App.js:113:16
I have taken Referencce from here: https://snack.expo.io/rkVFW2M1H
Let me know what i'm missing??
Share edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Jun 16, 2019 at 10:01 Abhishek ThapliyalAbhishek Thapliyal 3,7186 gold badges35 silver badges71 bronze badges 02 Answers
Reset to default 2I am able to solve via
this.onPressNext = this.onPressNext.bind(this);
this.onPressPrevious = this.onPressPrevious.bind(this);
& Remove {...this.props}
Add this two line constructor REF: Why ref does not work in the FlatList ponent?
OR
change Button action methods
onPressPrevious = () => {
this.flatListRef.scrollToIndex({ animated: true, index: 0 });
};
onPressNext = () => {
this.flatListRef.scrollToIndex({animated: true, index: 1});
};
This works for me
const flatListRef = useRef();
flatListRef?.current?.scrollToIndex({ animated: true, index: 0 })
Have to vaildate whether it is current render
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744935243a4601980.html
评论列表（0条）