Reactjs 如何创建使用StackNavigator的组件？

我正在尝试创建一个全局导航栏，该导航栏包含在“屏幕”文件中。我对React Native相当陌生，我遇到的问题是，我还试图在附带的导航栏中使用StackNavigator。通过这样做，我得到了以下错误

我正在使用以下代码

import NavBar from "../../components/navBar";


export default class HomeView extends Component {
  static navigationOptions = {
    title: 'Home Screen',
    headerVisible: false,
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.contentWrapper}>
        <StatusBar hidden={true} />
        <NavBar />
        <View style={styles.boxTop}><Text>Test</Text></View>
        <View style={styles.boxBottom}><Text>Test</Text></View>
      </View>
    );
  }
}

从“../../components/NavBar”导入导航栏；
导出默认类HomeView扩展组件{
静态导航选项={
标题：“主屏幕”，
头像：错，
};
render（）{
const{navigate}=this.props.navigation；
返回(
试验
试验
);
}
}

在导航文件中

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native'


export default class NavBar extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.contentWrapper}>
      </View>
    );
  }
}


var styles = StyleSheet.create({
  contentWrapper: {
    flex: 1,
    backgroundColor: "blue",
    height: 40,
  },
});

import React，{Component}来自“React”
进口{
样式表，
文本，
看法
形象
}从“反应本机”
导出默认类导航栏扩展组件{
render（）{
const{navigate}=this.props.navigation；
返回(
);
}
}
var styles=StyleSheet.create({
contentWrapper：{
弹性：1，
背景颜色：“蓝色”，
身高：40，
},
});

---

我不确定这是否是创建组件并包含StackNavigator的正确方法。

您已经差不多了解了！

导航

道具仅适用于直接传递给StackNavigator（或其他导航器）的屏幕。有两种方法可以从导航栏组件访问

导航

第一种方法是在使用导航道具时将其传递给导航栏组件，如下所示

import NavBar from "../../components/navBar";


export default class HomeView extends Component {
  static navigationOptions = {
    title: 'Home Screen',
    headerVisible: false,
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.contentWrapper}>
        <StatusBar hidden={true} />
        <NavBar navigation={this.props.navigation} />
        <View style={styles.boxTop}><Text>Test</Text></View>
        <View style={styles.boxBottom}><Text>Test</Text></View>
      </View>
    );
  }
}

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native'
import { withNavigation } from 'react-navigation';

class NavBar extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.contentWrapper}>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  contentWrapper: {
    flex: 1,
    backgroundColor: "blue",
    height: 40,
  },
});

export default withNavigation(Navbar);

谢谢你的帮助，我现在就试试。