为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

繁花不似锦 2022-10-08 18:00:00
当我按下其中一项(图像)时,我想打开屏幕。我需要在我的应用程序中打开播放器屏幕,因此每个项目必须是不同的屏幕。有没有办法做到这一点?请帮我。我在谷歌上找不到任何解决方案。这是我的代码:这是我的平面清单项目(图像):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>                    );        }}
查看完整描述

2 回答

?
动漫人物

TA贡献1815条经验 获得超10个赞

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


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


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


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


let categories = [ 

    {

        name : "Category 1",

        img : require("../Assets/Slika.jpg"),

        screenName: "PlayerScreen",

    },

    <TouchableOpacity

       onPress={() => {

          // navigate to screen named item.screenName

       }}

    >


查看完整回答
反对 回复 2022-10-08
?
慕侠2389804

TA贡献1719条经验 获得超6个赞

这是代码的更新。


平面清单项目:


let categories = [ 

        {

            name : "Category 1",

            img : require("../Assets/Slika.jpg"),

            screenName : "Player",

        },



按下:


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


查看完整回答
反对 回复 2022-10-08
  • 2 回答
  • 0 关注
  • 105 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信