未定义不是函数(评估'_this.props.navigation.navigate')

时间:2019-07-31 16:02:19

标签: javascript reactjs react-native

我正在尝试从Form.js访问“主页”。但是我的代码显示了该错误。我该如何解决?

我在arrowF中尝试过,路线没有任何效果。同样的错误...

  

这是我的Form.js,我在其中调用onPress =()尝试了函数,导航,但没有任何效果。我尝试添加const {navigation} = this.props;没有任何效果。同样的错误。

<View style={styles.viewChild}>
  <TouchableHighlight
     onPress={this._Home} title="Home"
     style={styles.button} >
   <Text style={{color: '#fff', fontSize: 16}}>Acessar</Text>
 </TouchableHighlight> 
  

这是我的Login.js。我在哪里称呼组件

import React from 'react';
import {
  Container, Top, Logo, Title, Content
} from './styles';

import Form from '~/components/Form/form';
import logo from '~/assets/logo.png';
import { MaterialTopTabBar, navigation } from 'react-navigation';

export default function Login(){
  return (
    <Container>
      <Top>
        <Logo source={logo} />
        <Title
          style={MaterialTopTabBar.display1}
        >Welcome</Title>
      </Top>
      <Content>
        <Form />
      </Content>
    </Container>
  );
}

  

这是我的Route.js,我尝试在Stack,BottomNav之间进行更改,但没有任何效果。从Form.js到“主页”的路由失败。我可以发布我的GitHub。

import { createAppContainer, createSwitchNavigator, createStackNavigator
} from 'react-navigation';

import Form from '~/components/Form/form';
import Home from '~/pages/Home/home';
import Main from '~/pages/Main';

const Routes = createAppContainer(
  createSwitchNavigator({
    Main: {screen: Main},
    Form: {screen: Form},
    Home: {screen: Home,
    navigationOptions: {
      title: 'Home',
      headerBackTitle: null,
    }}
   }),
);

export default Routes;

1 个答案:

答案 0 :(得分:0)

该函数的用法如下:

func1(){
    this.props.navigation.navigate("Form");
}
...
 <TouchableHighlight
     onPress={this.func1.bind(this)} title="Home"

or

 <TouchableHighlight
     onPress={() => this.func1()} title="Home"

使用箭头功能

const func1 = () => {
    this.props.navigation.navigate("Form");
}
...
 <TouchableHighlight
     onPress={this.func1} title="Home"