React Native：组件上的 onPress 不起作用

Posted 2023-02-22

【中文标题】React Native：组件上的 onPress 不起作用

【英文标题】：React Native: onPress on component doesn't function

【发布时间】：2016-11-16 15:35:01

【问题描述】：

所以我在我的 ReactJS 应用程序中使用 react-native-router-flux 进行导航，但我在将它与组件一起使用时遇到了困难。

例如下面的代码 sn-p 在点击链接时通过推送下一页完美地工作。

export default class MainMenuPage extends Component 
  render() 
    return (
      <View>
        <Text>Main Menu</Text>
        <TouchableOpacity onPress=Actions.bookmarksPage>
          <Text>Bookmarks</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress=Actions.settingsPage>
          <Text>Settings</Text>
        </TouchableOpacity>
      </View>
    );
  

虽然下面的代码 sn -p 当你按下链接时没有任何反应。

export default class MainMenuPage extends Component 
  render() 
    return (
      <View>
        <Text>Main Menu</Text>
        <MenuButton name="Bookmarks" onPress=Actions.bookmarksPage />
        <MenuButton name="Settings" onPress=Actions.settingsPage />
      </View>
    );
  


class MenuButton extends Component 
  render() 
    return(
      <TouchableOpacity>
        <Text>this.props.name</Text>
      </TouchableOpacity>
    );
  

显然第二个代码 sn-p 更干净。

【参考方案1】：

您必须将onPress 属性传递给TouchableOpacity：

class MenuButton extends Component 
  render() 
    return(
      <TouchableOpacity onPress=this.props.onPress>
        <Text>this.props.name</Text>
      </TouchableOpacity>
    );