Question

我想在HeaderRight上导航到其他屏幕onPress of profile-image stacknavigator的组件？我在routernavigator（tabscreen）中使用了tabnavigator。 Screen Image attached with it.onpress of profile icon in header should navigate to other screen] 1 导入React，{Component}来自＆＃39;反应＆＃39 ;;

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中使用此代码来应用支票

extract

代替const {prodIs} = route.params

如何使用堆栈导航器中的HeaderRight组件导航到其他屏幕？

2 个答案: