使用内部调用navigation.navigate（）创建共享组件 - React Native

Question

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

请参阅下面的代码，一切正常，但trainingCategories无效。

MyCode：

"Array index out of bounds"

使用组件

this.props.navigation.navigation.navigate('HireJob')

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开始，您可以使用stateless components：

更轻松地创建这些内容

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

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