javascript - React Native: onPress on component doesn't function - Stack Overflow

admin管理员组

文章数量:1420095

So I am using react-native-router-flux for my navigation in my ReactJS app but I am having difficulties using it with ponents.

For example the following code snippet works perfectly by pushing the next page when clicking the links.

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

While the following code snippet nothing happens when you press the links.

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

Obviously the second code snippet is much more cleaner.

So I am using react-native-router-flux for my navigation in my ReactJS app but I am having difficulties using it with ponents.

For example the following code snippet works perfectly by pushing the next page when clicking the links.

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

While the following code snippet nothing happens when you press the links.

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

Obviously the second code snippet is much more cleaner.

• javascript
• react-native
• reactjs-flux

Share Improve this question Follow edited Jul 13, 2016 at 21:45 TimoStaudinger 42.6k1616 gold badges8989 silver badges9696 bronze badges asked Jul 13, 2016 at 21:27 Joseph AnJoseph An 82211 gold badge77 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You have to pass the onPress prop through to the TouchableOpacity:

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

本文标签： javascriptReact Native onPress on component doesn39t functionStack Overflow