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

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事件处理程序的整个函数一样复杂。无论哪种方式，您都比我更了解您的代码，但您只需要向您的categories数组添加一些数据。编辑：这是使用上述 screenName 方法的示例。let categories = [&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name : "Category 1",&nbsp; &nbsp; &nbsp; &nbsp; img : require("../Assets/Slika.jpg"),&nbsp; &nbsp; &nbsp; &nbsp; screenName: "PlayerScreen",&nbsp; &nbsp; },&nbsp; &nbsp; <TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp;onPress={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // navigate to screen named item.screenName&nbsp; &nbsp; &nbsp; &nbsp;}}&nbsp; &nbsp; >

Answer 2

这是代码的更新。平面清单项目：let categories = [&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name : "Category 1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img : require("../Assets/Slika.jpg"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; screenName : "Player",&nbsp; &nbsp; &nbsp; &nbsp; },按下：<TouchableOpacity onPress={() => item.screenName}}>