使共享組件與調用navigation.navigate（）裏面 - 反應原生

Question

我想在共同組件的所有屏幕作出反應本機。所以我可以在主要組件之間分享它們。

見下面我的代碼，一切正常但this.props.navigation.navigation.navigate('HireJob')沒有工作。

mycode的：

export default class MyComponent extends Component { 

    callAndPush =() =>{ 
     console.log('callAndPush'); 
     this.props.navigation.navigate('HireJob') 
    } 

    render() { 
     return (
       <TouchableHighlight style = {{backgroundColor : 'red' , height : 30}} onPress = {() => this.callAndPush()}> 
       <Text>Apple</Text> 
       </TouchableHighlight> 
     ); 
    } 
} 

使用組件的：

render(){ 
    return (
     <View style = {styles.scrollSty}> 
      <MyComponent></MyComponent> 
    </View> 
    ); 
} 
} 

Answer 1

它是這樣工作的，繞過navigation prop轉換爲MyComponent。

<MyComponent {...this.props} /> 

Answer 2

每個組件可以被導入到其他組件，諸如導航儀。他們通過共享道具導入你的場景並在它們之間導航。

要使組件，並用它在不同的地方只需創建一個：

export default class MyComponent extends React.Component { 
    render() { 
     return (
       <Text> This is a special component </Text> 
     ); 
    } 
} 

而在你的其他類使用這樣的：

import MyComponent from '../path/to/MyComponent'; 

class AnotherComponent extends React.Component { 
    render() { 
     return (
       <MyComponent /> 
     ); 
    } 
} 

從陣營0.14開始，您可以創建這些使用stateless components簡單：

// A functional component using an ES2015 (ES6) arrow function: 
const MyComponent = (props) => { 
    return <Text> This is a special component </Text> 
}; 

你可以，如果你使用的道具數據傳遞 喜歡。