通过在内部调用 navigation.navigate() 创建共享组件 - React Native

Question

我想在 React Native 中为所有屏幕创建共享组件。所以我可以在主要组件之间共享它们。

查看下面的代码，一切正常，但 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

每个组件都可以导入到其他组件中，例如导航器。他们导入您的场景并通过共享道具在它们之间导航。

要制作一个组件并在不同的地方使用它，只需创建一个：

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

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

Answer 2

它是这样工作的，绕过 navigation prop 进入 MyComponent。

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

通过在内部调用 navigation.navigate() 创建共享组件 - React Native

Make shared component with calling navigation.navigate() inside - React Native

reactjs

react-native

react-navigation

react-native-0.46