react-native – FlatList onClick导航到下一个屏幕

当在react-native中的Flatlist中单击一行时,如何使Flatlist导航到下一个屏幕？

编辑：我在JS文件中发布了所有代码.

这是我的平面列表代码：

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

@H_403_8@

//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},})

react-native – FlatList onClick导航到下一个屏幕

猜你在找的React相关文章