Question

针对未定义的 this.props.navigation.navigate 做出反应导航器问题

2018-08-17

305

javascript reactjs react-native react-navigation

现在这个导航让我头疼，我看了几个关于这个的视频，并按照它们做，但仍然遇到同样的错误，即 this.props.navigation.navigate 未定义不是对象错误

这里基本上是我的代码

App.js

import React from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';
import { createStackNavigator } from 'react-navigation';
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

import Home from './Home';
import Details from './Details';

export default createStackNavigator(
 {
Home: {
  screen: Home
},
Details: {
  screen: Details
}
}, 
{
initialRouteName: 'Home',
}
);

这是我的 Home.js

import React, { Component } from 'react';
import { Container, Body, Header, Title, Content, List, ListItem, Text, Left, Right, Icon, Footer, FooterTab, Button} from 'native-base';

class Home extends Component {
 constructor(){
super();
this.state = {
  data: []
};
}

getData(){
return fetch('https://testdata.com')
.then((response) => response.json())
.then((responseJson) => {
  console.log(JSON.stringify(responseJson.result));
    this.setState({data:responseJson.result});
    //alert(responseJson.result[1].name);
    //return responseJson.result[1].name;
})
.catch((error) => {
  console.error(error);
});
 }
componentDidMount(){
this.getData();
 }
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
        title: "test",
         headerStyle: {
          backgroundColor: '#4050B5',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold'
},
    };
 };



  render() {
 let yytCardData = this.state.data.map(function(cardData, i){
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => this.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});

return (
  <Container>
  <Content>
      <List>
        {yytCardData}
      </List>
    </Content>
    <Footer>
      <FooterTab>
        <Button vertical active>
          <Icon name="apps" />
          <Text>Title List</Text>
        </Button>
        <Button vertical>
          <Icon name="search" />
          <Text>Search</Text>
        </Button>
      </FooterTab>
    </Footer>
  </Container>
);
  }
  }
  export default Home

和一个非常空的 Details.js

  import React, { Component } from 'react';
  import { Container, Header, Content, List, ListItem, Text, Left, Right, Icon } from 'native-base';

  class Details extends Component {

  render() {

      return(
  <Container>
    <Header />
    <Content padder>
      <Card transparent>
        <CardItem>
          <Body>
            <Text>
              This is just a transparent card with some text to boot.
            </Text>
          </Body>
        </CardItem>
      </Card>
    </Content>
  </Container>
    );
   }
  }
   export default Details;

我不确定在这种情况下哪个部分是错误的，但做一个简单的导航听起来很复杂

Answer 1

您需要在 render 方法中使用 箭头函数 绑定您的函数。

let yytCardData = this.state.data.map((cardData, i) => { // Replace function with arrow function

Answer 2

问题出在 Home 组件 this.state.data.map(function(cardData, i){ 中。如果您不想使用箭头函数，则可以使用相同的函数，但只需将其分配给局部变量并使用该函数即可

let yytCardData = this.state.data.map(function(cardData, i){
let that = this;
  return (
        <ListItem key={cardData.ver}>
          <Left>
            <Text>{cardData.name}</Text>
          </Left>
          <Right>
            <Icon name="arrow-forward" />
           <Button transparent info onPress={() => that.props.navigation.navigate('Details')}>
        <Text>Info</Text>
      </Button>
          </Right>
        </ListItem>
  )
});

如果您想使用箭头函数，请按照 Pritish Vaidya 提到的操作