Question

出于某种原因，我无法通过TouchableOpacity处理onPress，我已经在Android和IOS上尝试过，只是为了确保这不是特定于平台的问题。我的组件出了什么问题？

    import React,{Component} from 'react'
    import {Text,FlatList,TouchableOpacity,View} from 'react-native'

    const MenuMainScreenListItem = (props) => {


        return (
            <TouchableOpacity style={{backgroundColor:'green'}} onPress={() => {
                console.log('xxx')
            }}>
                <View  style={{backgroundColor:'blue'}}>
                    <Text>
                        {props.name}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

    const MenuMainScreen  = (props) =>{

        let options = [
             {name:'name 1'}
            ,{name:'name 2'}
            ,{name:'name 3'}
            ,{name:'name 4'}
        ]

        return  (
            <View>
                {options.map((item, index) => {
                    return (<MenuMainScreenListItem key={index} name={item.key}/>)
                })}
            </View>

        )
    }

    export default MenuMainScreen

Answer 1

我已经通过放置您的代码在React Native Website中尝试了您的代码。我遇到的唯一问题是<MenuMainScreenListItem key={index} name={item.key}/>应为<MenuMainScreenListItem key={index} name={item.name}/>。 TouchableOpacity正常工作。

TouchableOpacity不会触发onPress

1 个答案: