FlatList onClick导航到下一个屏幕 [英] FlatList onClick navigate to next screen
本文介绍了FlatList onClick导航到下一个屏幕的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在react-native中在Flatlist中单击一行时,如何使Flatlist导航到下一个屏幕?
How do I make a Flatlist navigate to the next screen when a row is clicked inside the Flatlist in react-native?
已编辑:我将所有代码发布到了JS文件中.
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
推荐答案
我有一个简单的示例:
//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 :)
这篇关于FlatList onClick导航到下一个屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文