javascript - React Native - 将平面列表中所选项目的 id 发送到新屏幕

Question

我是 React Native 的新手。我正在将 API 中的数据添加到平面列表中。如何将选定的项目 ID 发送到新屏幕？这是我的主屏幕代码：

import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useThemedValues } from '../Theming';
import getStyles from "./Styles/HomeScreenStyles";
import Axios from '../../API/AxiosConfig'
import { FlatList } from 'react-native-gesture-handler';
import { texts, useLocalization } from "../Localization";


const HomeScreen = (props) => {

    const { styles, colors } = useThemedValues(getStyles);
    const loc = useLocalization();

    const [episodeList, setEpisodeList] = useState([])

    useEffect(() => {
        Axios.get('episode')
            .then(response => {
                let episodes = response.data.results
                setEpisodeList(episodes)
            })
            .catch(error => {
                console.log(error)
            })
    }, [])

    const _renderEpisodesItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={({ item }) => {
                props.navigation.navigate("episode-detail-screen", {
                    dummy1: 1,
                });
            }}>
                <View style={styles.episodeButton}>
                    <Text style={styles.episodeText}>
                        {loc.t(texts.season)}{item.episode.slice(1, 3)} - {loc.t(texts.episode)}{item.episode.slice(4, 6)}
                    </Text>
                    <Text style={styles.episodeNameText} numberOfLines={1}>{item.name}</Text>
                </View>
            </TouchableOpacity>
        )
    } 
    
    return (
        <View style={styles.container}>                
            <FlatList
                data={episodeList}
                renderItem={_renderEpisodesItem}
                keyExtractor={item => item.id}
                style={styles.flatListContainer}
            />
        </View>
    );
};

export default HomeScreen;

我的目的是在新打开的页面上显示所选部分的信息。

标签： javascriptreact-nativereact-hooksreact-native-flatlistreact-native-navigation

Answer 1

你可以像这样发送你的道具：

const _renderEpisodesItem = ({ item }) => {
    return (
        <TouchableOpacity onPress={() => {
            props.navigation.navigate("episode-detail-screen", {
                episodeId: item.id,
            });
        }}>
            //...
        </TouchableOpacity>
    )
}

然后在你的EpisodeScreen你可以选择这样的：

const {episodeId} = props.route.params 

如果您使用 reactnavigation，则无法阅读此https://reactnavigation.org/docs/params/