React Navigation属性'导航'未定义

Question

我需要帮助，因为我有反应导航重定向的问题，我尝试其他人的演练谁不使用我的代码

在我的应用程序中，我有这个导航栏与图像

NavBar

onclick在这张图片我有这个错误应用程序错误

进入我的NavBar.js代码：

  <TouchableOpacity
  onPress={() =>
    this.props.navigation.navigate('Chat')}
  >
  <Image
    source={require('../../img/Contact.png')}
    style={styles.helpStyle}
  />
  </TouchableOpacity>

我的Router.js

export const HomeStack = StackNavigator({
  Home: {
    screen: HomeList,
    navigationOptions: {
      header: <NavBar />,
      },
    },
  HairList: {
    screen: HairList
  },
  Message: {
    screen: Chat
  }
});

export const CalendarStack = StackNavigator({
  Home: {
    screen: HomeList
  },
  HairList: {
    screen: HairList
  },
  BookingList: {
    screen: BookingList
  },
});

export const FavorisStack = StackNavigator({
  Home: {
    screen: HomeList
  },
  HairList: {
    screen: HairList
  },
});

export const ProfilStack = StackNavigator({
  Profil: {
    screen: Profil
  },
});

export const Tabs = TabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      tabBarIcon: (
            <Image
              style={{ width: 36, height: 32 }}
              source={require('./img/home.png')}
            />
      ),
    },
  },
  Calendar: {
    screen: CalendarStack,
    navigationOptions: {
      tabBarIcon: (
            <Image
              style={{ width: 36, height: 37 }}
              source={require('./img/planning.png')}
            />
      ),
    },
  },
  Favoris: {
    screen: FavorisStack,
    navigationOptions: {
      tabBarIcon: (
            <Image
              style={{ width: 36, height: 32 }}
              source={require('./img/favoris.png')}
            />
      ),
    },
  },
  Profil: {
    screen: ProfilStack,
    navigationOptions: {
      tabBarIcon: (
            <Image
              style={{ width: 38, height: 32 }}
              source={require('./img/Logo.png')}
            />
      ),
    },
  },
}, {
  tabBarOptions: {
    showLabel: false,
    style: {
      backgroundColor: '#ed6e74',
    },
  },
});

export const Router = StackNavigator({
  Tabs: {
    screen: Tabs,
  },
}, {
  headerMode: 'none',
});

App.js

class App extends Component {
  render() {
    return (
      <Router />
    );
  }
}

点击后我需要重定向到聊天屏幕

Answer 1

我发送navigation与NavBar。

在Router.js中：

navigationOptions = ({navigation}) => {
  header: <NavBar navigation={navigation} />,
  },
}

然后在NavBar.js中：

<TouchableOpacity
    onPress={() => navigation.navigate('Chat')}>
    <Image
        source={require('../../img/Contact.png')}
        style={styles.helpStyle}
    />
</TouchableOpacity>

Answer 2

问题解决了

用标题按钮重定向导入这个

import { withNavigation } from 'react-navigation';

并添加withNavigation

export default withNavigation(NavBar);