如何在其他课程中使用反应导航?

时间:2019-01-29 13:40:29

标签: react-native

我有一个标题和一个购物车按钮。此按钮用于导航到购物车屏幕。当我按下按钮时,我看到了错误。

错误:未定义不是对象(正在评估'_this3.props.navigation.navigate')

标头在标头文件的标头类中: 我在电子钱包屏幕等其他屏幕中使用标题。

<Header style={styles.headerStyle}>
      <Body>
        <Text>Logo</Text>
      </Body>
      <Right>
      <TouchableOpacity activeOpacity={0.5} onPress={() => {
                      this.props.navigation.dispatch(StackActions.reset({
                        index: 0,
                        actions: [
                          NavigationActions.navigate({ routeName: 'Cart' 
      })
                        ],
                      }))
                    }}>
        <Icon type="MaterialCommunityIcons" name="washing-machine"/>
        {this.state.cartCountNumber != 0 ?(
            <View style={styles.cartCountBox}>
              <Text>{this.state.cartCountNumber}</Text>
            </View>
         ):null}
      </TouchableOpacity>
      </Right>
</Header>

钱包屏幕:当我在机上使用钱包中的内容时有效!

export default class WalletScreen extends React.Component{


render() {
  return (
    <Container>
    <HeaderShow />  // My header is here !!!!!!!!!!!!!!!!!!
    <Content>
    <Text>Wallet Screen</Text>



    // When I use button and on-press here, working fine!



    </Content>
   </Container>
   );
  }

 }

1 个答案:

答案 0 :(得分:3)

如果您在“电子钱包”屏幕中访问this.props.navigation,则将导航道具添加到“电子钱包中的标题”屏幕后,它将起作用;

export default class WalletScreen extends React.Component {
    render() {
        return (
            <Container>
                <HeaderShow navigation={this.props.navigation}/> // My header is here !!!!!!!!!!!!!!!!!!
                <Content>
                    <Text>Wallet Screen</Text>


                    // When I use button and on-press here, working fine!


                </Content>
            </Container>
        );
    }
}