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