如何使列表项可点击并导航到另一个页面？

Question

How can I make items clickable on my list and then navigate to another page? I want to have some arrow icon included and visible signs to the eyes when I clicked on some items list. I would love to help with this because I didn't really understand how to do it in my case. In my code, I show a list that comes from axios.

This is link to my example list

import React, { Component } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, Platform, FlatList, Dimensions, Image } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons'
import HeaderButton from '../components/HeaderButton';
import axios from 'axios';
import { DrawerNavigator } from 'react-navigation';



const { width, height } = Dimensions.get('window');

export default class MainScreen extends Component {
    constructor(props) {
        super(props);
        this.state = { isLoading: true, data: [] };
    }

    componentDidMount() {
        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
            .then(res => {
                this.setState({
                    isLoading: false,
                    data: res.data,
                })
                console.log(res.data);
            })
    }

    renderItem(item) {
        const { title, artist, url } = item.item;
        return (
            <View style={styles.itemView}>


                <View style={styles.itemInfo}>
                    <Text style={styles.name}>
                        {title + ' ' + artist }
                    </Text>
                    <Text style={styles.vertical} numberOfLines={2}></Text>
                </View>
            </View>
        );
    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, padding: 20 }}>
                    <Text style={{ alignSelf: 'center', fontWeight: 'bold', fontSize: 20 }}>טוען נתונים...</Text>
                    <ActivityIndicator />
                </View>
            )
        }

        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    keyExtractor={item => item.id}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'

    },
    itemView: {
        flex: 1,
        width,
        borderBottomWidth: 0.5,
        borderColor: 'black',
        borderStyle: 'solid',
        paddingHorizontal: 12,
        flexDirection: 'row',
    },
    imgContainer: {
        flex: 0,
        borderColor: 'black',
        borderWidth: 1.5,
        height: 60,
        width: 60,
        alignItems: 'center',
        justifyContent: 'center',
    },
    itemInfo: {
        flex: 1,
        marginHorizontal: 10,
    },
    name: {
        //fontFamily: 'Verdana',
        fontSize: 18,
        color: '#ff0000',
        textAlign: 'left',
    },
    imageStyle: {
        height: 50,
        width: 50,
    },
    vertical: {
        fontSize: 18,
    }

});

Answer 1

You can use TouchableOpacity to make your list clickable, but to navigate to another page you need have your React Navigation working correctly.

First import TouchableOpacity from the react-native library. Then you can edit your renderItem element to use it:

renderItem(item) {
    const { title, artist, url } = item.item;
    return (
        <TouchableOpacity onPress={()=>this.props.navigation.navigate("OTHER_PAGE_NAME")} style={styles.itemView}>


            <View style={styles.itemInfo}>
                <Text style={styles.name}>
                    {title + ' ' + artist }
                </Text>
                <Text style={styles.vertical} numberOfLines={2}></Text>
            </View>
        </TouchableOpacity>
    );
}

TouchableOpacity reference: https://facebook.github.io/react-native/docs/touchableopacity

React Navigation reference: https://reactnavigation.org/docs/en/navigating.html

Answer 2

I had the same issue too and gave my items module-id's. I had 3 different main screens to avigate to so I solved it with a switch; first:

const onRandomthingPressed = () => {
   itemSelected(navigate, {
      moduleid: 1,
   })
}

then use id's:

const something = (navigate, item) => {
   switch (item.moduleid) {
      case 1:
         navigation.navigate('screen1')
         break
      case 2:
         navigation.navigate('screen2')
         break
      case 3:
         navigation.navigate('screen3')
         break
      default:
         break
   }
}