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

平面列表：

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 = [ 
    {
        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",
        },

onPress：

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

Answer 3

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

这是我的组件屏幕。这是Class，但我想将其转换为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>
            
        );    
    }
}

如何在React Native中打开平板列表中的项目？

3 个答案: