Question

我为所有页面创建了公共标题，所以创建标题组件然后我在signup.js组件goback导航函数中包含该标头在signup.js页面中工作但不工作标题组件获取未定义对象navigate.goback错误

任何人都可以为我提供解决方案，就像我包含组件

一样

示例代码：

import React from 'react';
import { StyleSheet, Text, View, Image, ScrollView, TextInput,KeyboardAvoidingView, StatusBar } from 'react-native';
import {Icon,Body,Button,Title,Left,Right} from 'native-base';
import Expo from "expo";
import { Constants } from 'expo';
import Headerbar from "./../Header/header";
import Statusbar from "./../statusbar";
const googleIcon=require('../../../img/google_icon.png');
const fbIcon=require('../../../img/fb_icon.png');
export default class Socialsignup extends React.Component {
  constructor(props) {
		super(props);
		this.state = {
    };
   
    
  }
  
  render() {
    return (
      <ScrollView style={styles.socialContainer}  scrollEnabled={true}> 
        <Statusbar/>
        <Headerbar title="Social Login"   />
          <View style={styles.socialText}>
                  <Text style={styles.accountText}>Choose an account</Text>
          </View>
          <View style={styles.socialIconsBase}>
                <View style={styles.socialIconsGoogle}>
                    <Image source={googleIcon} style={styles.googleIcon}/>
                    <Text style={styles.iconText}>
                      Google
                    </Text>
                </View>
                <View style={styles.socialIconsGoogle}>
                <Image source={fbIcon} style={styles.fbIcon}/>
                    <Text style={styles.iconText}>
                      Facebook
                    </Text>
                </View>
          </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({

  socialContainer: {
    backgroundColor: '#fff',
  },
  accountText: {
      marginTop:25,
      fontSize:20,
      padding:20
  },
  socialIconsBase:
  {
    flexDirection:'row',
    flex:1,
    marginTop:40,
    borderBottomWidth:1,
    borderBottomColor:'#a8c0ce'
  },
  socialIconsGoogle:
  {
      flex:1,
      alignItems:'center',
      paddingTop:25,
      paddingBottom:25,
      borderRightWidth:1,
      borderRightColor:'#a8c0ce',
      marginBottom:8,
  },
  fbIcon:{
    height:50,
    width:50,
  },
  googleIcon:{
    height:50,
    width:50,
  },
  iconText:{
        fontSize:15,
        marginTop:15
  }
  
});

Answer 1

你需要在标题组件中使用它：

import { withRouter } from 'react-router'

然后代替export default HeaderClassName

使用export default withRouter(HeaderClassName)

您可以通过this.props.history.goBack()

返回

您也需要使用它：

<BrowserRouter>
<App />

然后添加这样的页面

<Route path='/page' component={Page} />

React本机堆栈导航goBack（）无法正常工作

1 个答案: