React Родной: onPress на компоненте не работает

Question

Поэтому я использую react-native-router-flux для моей навигации в моем приложении ReactJS, но у меня возникают трудности с его использованием с компонентами.

Например, следующий фрагмент кода отлично работает, нажав следующую страницу при нажатии ссылок.

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