问题
How do I make a Flatlist navigate to the next screen when a row is clicked inside the Flatlist in react-native?
Edited: I posted all the codes inside my JS file.
Here is my flatlist code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
FlatList,
Button,
TouchableOpacity,
TouchableHighlight
} from 'react-native'
const Tasks = (props) => {
const { navigate } = props.navigation;
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Task 1'},
{key: 'Task 2'},
{key: 'Task 3'},
{key: 'Task 4'},
{key: 'Task 5'},
]}
renderItem={({item}) => <TouchableHighlight onPress={() => this.goToNextScreen()}>
<Text style={styles.item}>{item.key}</Text>}
</TouchableHighlight>}
/>
<TouchableOpacity style={{ height: 50, marginTop: 5, marginLeft: 100, marginRight: 100 }}>
<Button
onPress={()=>navigate('Steps')}
title="Steps"
/>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})
Tasks.navigationOptions = {
title: 'Task Order',
};
export default Tasks
回答1:
i have simple example for that :
//Tasks Component
const Tasks = (props) => {
const { navigate } = props.navigation;
//function to go to next screen
goToNextScreen = () => {
return navigate('Detail');
}
return (
<View>
<FlatList
data={[
{key: 'Task 1'},
{key: 'Task 2'},
{key: 'Task 3'},
{key: 'Task 4'},
{key: 'Task 5'},
]}
renderItem={({item}) => {
return(
<TouchableHighlight onPress={() => this.goToNextScreen()}>
<Text >{item.key}</Text>
</TouchableHighlight>
)
}
}
/>
</View>
);
}
//example for detail screen
const Detail = (props) => {
const { navigate } = props.navigation;
return(
<View><Text>Detail Screen</Text></View>
);
}
//initial screen
const App = StackNavigator({
Tasks: {screen: Tasks},
Detail: {screen: Detail},
})
maybe can help you, thanks :)
来源:https://stackoverflow.com/questions/45406675/flatlist-onclick-navigate-to-next-screen