Créer un composant partagé avec l'appel de navigation.navigate() à l'intérieur - Réagir Natif

Question

Je souhaite que le composant partagé pour tous les écrans réagisse en mode natif. Je peux donc les partager entre les composants principaux.

Voir mon code ci-dessous, tout fonctionne, mais le this.props.navigation.navigation.navigate('HireJob') ne fonctionne pas.

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

Utilisation de composants:

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

Answer 1

cela fonctionne comme ceci, en omettant navigation prop en MyComponent.

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

Answer 2

Chaque composant peut être importé dans d'autres composants, tels que les navigateurs. Ils importent vos scènes et naviguent entre eux en partageant les accessoires.

Pour faire un composant et l'utiliser dans des endroits différents simplement créer un:

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

Et dans vos autres classes utilisent comme ceci:

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

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

A partir de React 0,14, vous pouvez créer ceux-ci plus facile en utilisant stateless components:

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

vous pouvez transmettre des données à l'aide des accessoires si vous comme.