如何在反应原生中单击平面列表中的项目来打开屏幕？

Question

当我按下其中一项（图像）时，我想打开屏幕。 我需要在我的应用程序中打开播放器屏幕，因此每个项目必须是不同的屏幕。 有没有办法做到这一点？ 请帮我。 我在谷歌上找不到任何解决方案。 这是我的代码：

这是我的平面清单项目（图像）：

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"),
        },
      ];
        

平面列表：

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

2 件事。 首先，您很少想使用 TouchableWithoutFeedback。 用户在触摸可以与之交互的东西（例如按钮）时期望得到反馈。

如果你 100% 确定你希望它没有反馈，那么继续这样做，但我认为你可能会想要 TouchableOpacity。

第二件事是你快到了。 您需要将onPress道具添加到您的可触摸标签。 您将需要更新您的数据源，以便其中的每个“ item ”都包含您需要能够导航到正确屏幕的信息。 它可能就像包含另一个名为“ screenName ”等的变量一样简单，或者您可能会变得像添加传递给onPress事件处理程序的整个 function 一样复杂。 无论哪种方式，您都比我更了解您的代码，但您只需要向您的categories数组添加一些数据。

编辑：这是使用上述 screenName 方法的示例。

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

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

Answer 2

这是代码的更新。

平面清单项目：

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

按下：

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

Answer 3

这是此问题的解决方案，但仍然无法正常工作，因为 Class 必须转换为 Function。

这是我的组件屏幕。 这是 Class 但我想将其转换为 Function ...

这是我要转换为 function 的 Class 组件：

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