Как я могу перейти на другой экран с помощью компонента HeaderRight в навигаторе стека?

Я хочу перейти на другой экран при нажатии изображения профиля в компоненте HeaderRight в stacknavigator? Я использовал tabnavigator внутри своего роутера-навигатора (tabscreen). Изображение экрана, прикрепленное к нему. нажатие значка профиля в заголовке должно перейти на другой экран] 1 импортировать React, {Component} из '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,
          },
        });

react-native reactjs navigation stack-navigator react-router
person Kamlesh Tilwani    schedule 10.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это то, что вам нужно.

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

arrow_upward
0
arrow_downward

эта ошибка только из-за editProductSceen ожидает идентификатора, но когда я щелкнул значок, я не передал идентификатор. поэтому я решил эту ошибку, чтобы применить проверку, используя этот код на экране редактирования

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

вместо const {prodIs} = route.params

person Muhammad Zeeshan    schedule 27.08.2020