javascript - 文本上的 TouchableOpacity 效果

Question

我希望我的菜单文本具有与 TouchableOpacity 在触摸时相同的效果。并打开一个新屏幕

***Settings.js***

import React, { useState } from 'react'
import{StyleSheet,Text,View,TextInput} from 'react-native'
import { TouchableOpacity,FlatList,ScrollView } from 'react-native-gesture-handler'

export default function App(){
    const[menu,menupeople]=useState([
        {name:'My Account',key:1},
        {name:'Notification Settings',key:2},
        {name:'Clear Cache',key:3},
        {name:'Legal Information',key:4},
        {name:'Rate App Tak',key:5},
        {name:'Version',key:6},
        {name:'About',key:7},
    ])
    return(
        <View style={styles.container}>

            <ScrollView>
            {menu.map((item)=>{
                return(
               <View
               key={item.key}
               >
                   <Text style={styles.item}
                   >{item.name}</Text>
             </View>
                )
            })}
            
          

          
        
            </ScrollView> 
        </View>
    )
    
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#fff',
        paddingTop:40,
        paddingHorizontal:20,
        alignItems:'center'
    }
})

有什么办法可以做到这一点我第一次将可触摸的不透明度应用于项目菜单，每个项目都会打开一个新屏幕

标签： javascriptreact-native

Answer 1

您可以使用 touchableopacity 而不是 View 来包装菜单项，如下所示

 {menu.map((item)=>{
                return(
               <TouchableOpacity onPress={()=>alert(item.name)}
               key={item.key}
               >
                   <Text style={styles.item}
                   >{item.name}</Text>
             </TouchableOpacity>
                )
            })}

在这里，我提出了一个警报，您可以将其更改为您的导航代码。

请从 react native 导入 TouchableOpacity

import { TouchableOpacity } from "react-native";