reactjs - 使用内部调用 navigation.navigate() 制作共享组件 - React Native

Question

我想在本机反应中为所有屏幕制作共享组件。所以我可以在主要组件之间共享它们。

请参阅下面的代码，一切正常，但this.props.navigation.navigation.navigate('HireJob')不起作用。

我的代码：

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

从 React 0.14 开始，您可以使用无状态组件更轻松地创建这些：

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

如果您愿意，可以使用 props 传递数据。