Question

现在我已经开始用导航导航了，我已经看了几个关于这个的视频并关注它们，但是仍然遇到this.props.navigation.navigate相同的错误undefined不是对象错误

这基本上是我的代码

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提到的内容

对未定义的this.props.navigation.navigate

2 个答案: