[英]how to pass data to navigation header in react native?
我有一个购物车图标作为几乎所有屏幕的标题右按钮。 我正在使用反应导航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
当你调用addToCart
时,你应该给它加上括号,因为它有一个 function 值,它应该是addToCart()
。 此外,每当您调用addToCart()
时,该值都不会改变,因为 scope varcount
只是本地的,我建议您将其设为全局,这样它就不会重置该值
我自己解决了这个问题,使用从父母到孩子的传递参数,反之亦然。 以下是我在代码中所做的更改。
路由.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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.