this.props.onPressは関数ではありません

Question

私はを含むHomePage.jsを持っています。About Usボタンをクリックして、AboutUs.jsを表示したいと思います。 HomePage.jsが正しく表示されますが、ボタンをクリックすると、次のエラーが表示されます。this.props.onPressは関数ではありません。私は、再利用可能なコンポーネントButton.jsを有しそして

import React, { Component } from 'react'; 
import { StackNavigator } from 'react-navigation'; 
import HomePage from './HomePage'; 
import AboutUs from './AboutUs'; 


const App = StackNavigator({ 
    HomePage: { 
     screen: HomePage, 
     navigationOptions: { 
      header:() => null 
     } 
    }, 
    AboutUs: { 
     screen: AboutUs, 
     navigationOptions: { 
      header:() => null 
     } 
    } 
}); 

export default App; 

App.jsを有する

（ 'this.props.onPress（E）' は、 'this.props.onPress' はオブジェクトのインスタンスである）：

import React from 'react'; 
import { Text, TouchableOpacity } from 'react-native'; 

const Button = ({ onPress, children }) => { 
    return (
     <TouchableOpacity onPress={onPress}> 
      <Text>{children}</Text> 
     </TouchableOpacity> 
    ); 
}; 

export { Button }; 

HomePage.js Buttonコンポーネントをレンダリングしています。私はそれを押したとき、私は上記のエラーを取得

import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
import { Button } from './Button.js'; 
import AboutUs from './AboutUs'; 

class HomePage extends Component{ 

    render() { 
    const { navigate } = this.props.navigation; 
    return(
     <View> 
     <Button 
      onPress={() => navigate('AboutUs'), { name: 'About Us' }} 
      >About Us</Button> 
     </View> 
    ) 
    } 
} 

export default HomePage; 

AboutUs.js

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 

class AboutUs extends Component { 
    render() { 
     return (
     <View> 
      <Text>About us!</Text> 
     </View> 
     ); 
    } 
} 

export default AboutUs; 

Answer 1

これはあなたの代わりに機能refの内{ name: 'About Us' }を混同よう

onPress={() => navigate('AboutUs'), { name: 'About Us' }} 

はそう有効な関数のリファレンスではありませんButton