亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在反應原生中單擊平面列表中的項目來打開屏幕?

如何在反應原生中單擊平面列表中的項目來打開屏幕?

繁花不似錦 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 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號