当在react-native中的Flatlist中单击一行时,如何使Flatlist导航到下一个屏幕？
这是我的平面列表代码：
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
我有一个简单的例子：
//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'},]}
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},})
也许可以帮到你,谢谢:)
