反应导航属性＆＃39;导航＆＃39;未定义的

Question

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

在我的应用中，我有这个带图像的导航栏

的NavBar

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

进入我的NavBar.js代码：

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

My 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

问题解决了

使用标题按钮重定向导入此

import { withNavigation } from 'react-navigation';

并添加withNavigation

export default withNavigation(NavBar);

Answer 2

我将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>