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

【问题标题】：How to make list items clickable and navigate to another page?如何使列表项可点击并导航到另一个页面？
【发布时间】：2020-01-16 12:29:44
【问题描述】：

如何使列表中的项目可点击，然后导航到另一个页面？当我单击某些项目列表时，我希望包含一些箭头图标和可见的标志。我很乐意为此提供帮助，因为我并不真正了解如何在我的情况下做到这一点。在我的代码中，我展示了一个来自 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,
    }

});

【问题讨论】：

你的意思是链接吗？
我的意思是，当我将在我的列表中推送一些行时，它将能够导航到另一个屏幕。我希望每一行都可以点击。
您可以将onPress 事件处理程序附加到您的项目，然后导航。
你能告诉我怎么做吗？因为我不使用卡片或列表视图..我每一行都可以点击
视图有onPress 事件，但不提供反馈，用TouchableX 组件包装它。

标签： javascript react-native listview axios react-native-flatlist

【解决方案1】：

您可以使用TouchableOpacity 使您的列表可点击，但要导航到另一个页面，您需要让您的 React Navigation 正常工作。

首先从react-native 库中导入TouchableOpacity。然后你可以编辑你的 renderItem 元素来使用它：

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 参考：https://facebook.github.io/react-native/docs/touchableopacity

React Navigation 参考：https://reactnavigation.org/docs/en/navigating.html

【讨论】：

但是现在当我点击一个框时，数据及其底部的线是不透明的，而不是数据周围的框..只有它的底线

【解决方案2】：

我也遇到了同样的问题，并给了我的项目模块 ID。我有 3 个不同的主屏幕要导航，所以我用一个开关解决了它；第一：

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

然后使用id：

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
   }
}

【讨论】：