如何在本機反應中將數據傳遞給導航 header？

Question

我有一個購物車圖標作為幾乎所有屏幕的標題右按鈕。 我正在使用反應導航5。 我想從我的組件更新該按鈕上的徽章計數。 在不使用 redux 或通量庫的情況下有什么可能的方法來實現它？ 以下是我的代碼，例如：

路由.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Home, Cart, Wishlist, Login, Signup, Contact, Profile, Search } from './scenes';
import { Primary, Secondary } from './assets/color';
import { HeaderButton } from './components'
const Stack = createStackNavigator();
function Route() {
    return (
        <Stack.Navigator initialRouteName="Profile" screenOptions={({ navigation, route }) =>({ headerRight:()=>(<HeaderButton navigation={navigation} nav='Cart'/>)})}>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Cart" component={Cart} options={{headerRight:null}}/>
            <Stack.Screen name="Search" component={Search} />
        </Stack.Navigator>
);
}

export default Route;

headerButton.js

import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class HeaderButton extends Component{
    render(){
        return(
            <>
            <Button rounded transparent onPress={()=>this.props.navigation.push('Cart')}>
                <Icon type='MaterialIcons' name='shopping-cart' style={{color:Primary,right:6,top:2}}/>
            </Button>
           <Text>{this.props.count}</Text>
            </>
        );
    }
}

主頁.js

import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class Home extends Component{
    constructor(){
        super();
        this.state={
            count:1
        }
    }
    addToCart=()=>{
        var varcount=this.state.count;
        varcount=varcount+1;
        this.setState({count:varcount})
    }
    render(){
        return(
            <Button onPress={this.addToCart}>
            <Text>Add to cart</Text>
            </Button>

        );
    }
}

每當在應用程序中更改計數時，它必須反映在 route.js 中的 headerbutton 組件中作為 headerRight

Answer 1

當你調用addToCart時，你應該給它加上括號，因為它有一個 function 值，它應該是addToCart() 。 此外，每當您調用addToCart()時，該值都不會改變，因為 scope varcount只是本地的，我建議您將其設為全局，這樣它就不會重置該值

Answer 2

我自己解決了這個問題，使用從父母到孩子的傳遞參數，反之亦然。 以下是我在代碼中所做的更改。

路由.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Home, Cart, Wishlist, Login, Signup, Contact, Profile, Search } from './scenes';
import { Primary, Secondary } from './assets/color';
import { HeaderButton } from './components'
const Stack = createStackNavigator();
function Route() {
   const [count, setCount] = React.useState(0);
     const onCount=(value)=>{
        setCount(value);
        console.log(count, value);
    }
    return (
        <Stack.Navigator initialRouteName="Profile" screenOptions={({ navigation, route }) =>({ headerRight:props =>(<HeaderButton navigation={navigation} nav='Cart' {...props} badgeCount={count}/>)})}>
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Cart" component={Cart} options={{headerRight:null}}/>
            <Stack.Screen name="Search" component={Search} />
        </Stack.Navigator>
);
}

export default Route;

headerButton.js

import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class HeaderButton extends Component{
    render(){
        return(
            <>
            <Button rounded transparent onPress={()=>this.props.navigation.push('Cart')}>
                <Icon type='MaterialIcons' name='shopping-cart' style={{color:Primary,right:6,top:2}}/>
            </Button>
           <Text>{this.props.badgeCount}</Text>
            </>
        );
    }
}

主頁.js

import React, { Component } from "react";
import { View } from 'react-native'
import { Button, Icon, Badge, Text } from 'native-base';
import { Primary, Danger } from '../../assets/color'
export class Home extends Component{
    constructor(){
        super();
        this.state={
            count:1
        }
    }
    addToCart=()=>{
        var varcount=this.state.count;
        varcount=varcount+1;
        this.setState({count:varcount})
        this.props.onCountChange(this.state.count);

    }
    render(){
        return(
            <Button onPress={this.addToCart}>
            <Text>Add to cart</Text>
            </Button>

        );
    }
}