如何使用堆栈导航器中的 HeaderRight 组件导航到另一个屏幕？

Question

我想导航到其他屏幕 onPress of profile-image on HeaderRight 堆栈导航器的组件？我在我的 routersnavigator(tabscreen) 中使用了 tabnavigator。 Screen Image attached with it.onpress of profile icon in header should navigate to other screen]1 从 'react' 导入 React，{ 组件}；

import {Platform,StyleSheet,
  Text,
  View,Dimensions,Image,TouchableHighlight
} from 'react-native';    
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vectoricons/MaterialIcons';
import NavigatorScreen from './src/Components/NavigatorScreen.js'
import Favourites from './src/Components/Favourites.js'
import Scenes from './src/Components/Scenes.js'
import Likes from './src/Components/Likes.js'
import profile from './src/Components/Profile.js'

const Navigation = StackNavigator ({ 
          Register: { screen: NavigatorScreen,
            navigationOptions: {
              headerTitle: 'SCENES',
              headerLeft:  <Icon style={{marginLeft:18, color:'#000'}} name={'ios-notifications-outline'} size={28}/>,
              headerRight: <View>


    <TouchableHighlight onPress = { () => navigate ("profile", {}) }>
                              <Image borderRadius={14}
                                style={{width: 28, height: 28,marginRight: 18, borderWidth:1}}
                                source={{uri : 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg'}}
                              />
                            </TouchableHighlight>
                           </View>,       
                            headerTintColor: 'white',
                            headerStyle:{
                                backgroundColor: '#fff',
                                shadowOpacity: 0,
                                shadowOffset: {
                                  height: 0,
                                  width:0
                                },
                                shadowRadius: 0,
                                elevation: 0,
                              },
                            headerTitleStyle: {
                                color: '#36292a',
                                fontFamily: 'WorkSans-Regular',
                                fontWeight: '300',
                                fontSize: 14,
                                alignSelf: 'center'
                              },   
                          }
                        },
          profile: {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
            screen: profile
          },
        });

        export default Navigation;

        const styles = StyleSheet.create({
          container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
          },
          welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
          },
          instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
          },
        });

Answer 1

这就是你想要的。

navigationOptions : (props) => {
        const {navigation} = props;
        return ({
            ...
            headerRight:<TouchableOpacity onPress = {() => navigation.navigate ("profile", {}) }> /*your code*/
            ...
        })
    }

Answer 2

这个错误只是因为 editProductSceen 需要 id 但当我点击图标时我没有传递 id。所以我已经解决了这个错误，通过在 editscreen

中使用这个代码来应用检查

let prodId = null;
  if (route.params && route.params.prodId) {
    prodId = route.params.prodId;
  }

而不是 const {prodIs} = route.params

如何使用堆栈导航器中的 HeaderRight 组件导航到另一个屏幕？

How can I navigate to other screen using HeaderRight component in stack navigtaor?

navigation

reactjs

react-router

react-native

stack-navigator