Reactネイティブ：onPress on componentは機能しません

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

明らかに、2番目のコードスニペットははるかにクリーンです。あなたがTouchableOpacityに至るonPress小道具を渡す必要が

Answer 1

：

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