Как открыть экран, щелкнув элемент в плоском списке в React Native?

Question

Я хочу открывать экран, когда нажимаю один из этих элементов (изображений). Мне нужно открыть экран проигрывателя в моем приложении, поэтому для каждого элемента он должен быть другим. Как это сделать? Пожалуйста, помогите мне. Я не могу найти решение в Google. Вот мой код:

Вот мои элементы плоского списка (изображения):

class ReadingComponent extends Component {
    constructor(props: any) {
        super(props);
    }
    
    render() {
        
    let categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
        },
        {
            name : "Category 2",
            img : require("../Assets/Slika.jpg"),
        },
        {
            name : "Category 3",
            img : require("../Assets/Slika.jpg"),
        },
      ];
        

Flatlist:

return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableWithoutFeedback>
                        <Surface style={styles.surface} >
                            <ImageBackground
                            source={item.img} 
                            style={styles.img}
                            blurRadius={0.5}>
                        <Icon name="music" color="#fff" size={22}/>
                        <Text style={styles.name}>{item.name}</Text>
                            </ImageBackground>
                        </Surface>
                        </TouchableWithoutFeedback>
                        );
                    }}
                />
            </View>
            
        );    
    }
}

Answer 1

Вот обновление кода.

Элементы плоского списка:

let categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player",
        },

onPress:

<TouchableOpacity onPress={() => item.screenName}}>

Answer 2

Вот решение этой проблемы, но оно все еще не работает, потому что класс необходимо преобразовать в функцию.

Вот мой экран компонентов. Вот класс, но я хочу преобразовать его в функцию ...

Вот тот компонент класса, который я хочу преобразовать в функцию:

class ReadingComponent extends Component {
    constructor(props: any) {
        super(props);

    }

    redirectTo(screenName: any) {
        useNavigation().navigate(`${screenName}`);
    }

Вот элементы FlatList:

    render() {
        
    let categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player",
        },
        {
            name : "Category 2",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player1",
        },
    ];

Вот детали возврата и плоский список:

        return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity 
                            onPress={() => this.redirectTo(item.screenName)}>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>
            
        );    
    }
}

Answer 3

2 штуки. Во-первых, вы очень редко хотите использовать TouchableWithoutFeedback. Пользователи ожидают обратной связи, когда они касаются чего-то, с чем они могут взаимодействовать, например кнопки.

Если вы на 100% уверены, что хотите, чтобы это было без обратной связи, продолжайте это, но я думаю, что вы, вероятно, захотите Вместо этого TouchableOpacity.

Во-вторых, вы почти у цели. Вам нужно добавить опору onPress к тегу touchable. Вы захотите обновить свой источник данных, чтобы каждый «item» в нем содержал информацию, необходимую для перехода к нужному экрану. Это может быть так же просто, как включение другой переменной с именем «screenName» или тому подобное, или вы можете усложнить задачу, например, добавить целую функцию, которую вы передаете в обработчик событий onPress. В любом случае, вы знаете свой код лучше, чем я, но вам просто нужно добавить немного данных в массив categories.

EDIT: вот пример с использованием подхода screenName, упомянутого выше.

let categories = [ 
    {
        name : "Category 1",
        img : require("../Assets/Slika.jpg"),
        screenName: "PlayerScreen",
    },

    <TouchableOpacity
       onPress={() => {
          // navigate to screen named item.screenName
       }}
    >