this.props.onPress는 함수가 아닙니다.

Question

나는 을 포함하고 있습니다. 버튼을 클릭하면 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 구성 요소를 렌더링합니다. 내가 그것을 누를 때 나는 당신이 대신 기능 심판 내부 { name: 'About Us' }을 혼합처럼

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

이 유효한 함수 참조

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

없는 것 같습니다 위에서 언급 한 오류를 얻을 의 보조로 Button