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

Question

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

例如，以下代码片段在单击链接时推送下一页，效果非常好。

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>
    );
  }
}

虽然以下代码片段在您按下链接时没有任何反应。

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>
    );
  }
}

显然第二个代码片段更简洁。

Answer 1

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

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

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

React Native: onPress on component doesn't function

javascript

reactjs-flux

react-native