Как сделать элементы списка кликабельными и перейти на другую страницу?

Question

Как я могу сделать элементы кликабельными в моем списке, а затем перейти на другую страницу? Я хочу, чтобы при щелчке по списку некоторых предметов был включен значок со стрелкой и видимые знаки для глаз. Я хотел бы помочь с этим, потому что я действительно не понимал, как сделать это в моем случае. В моем коде я показываю список, который исходит от ax ios.

Это ссылка на мой список примеров

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

Вы можете использовать TouchableOpacity, чтобы сделать ваш список кликабельным, но для перехода на другую страницу вам нужно, чтобы ваша React Navigation работала правильно.

Первый импорт TouchableOpacity из библиотеки react-native. Затем вы можете отредактировать элемент 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

Реагировать Ссылка навигации: https://reactnavigation.org/docs/en/navigating.html

Answer 2

У меня тоже была такая же проблема, и я дал свой идентификатор модуля товаров. У меня было 3 разных основных экрана для перехода, поэтому я решил это с помощью переключателя; сначала:

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

, затем используйте идентификаторы:

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