Question

我在Detail.js文件的Routes.js页标题中显示购物车的总商品。我想在单击Add to bag按钮时更改总数。如我在this中所示图片。当我刷新我的应用程序时，它将更新，但是我想同时进行更改。我使用react-native-router-flux找到了动态标头的解决方案，但对于rightButton我不知道如何将更新后的变量传递给标头。

Routes.js ：

import {Actions, Router, Stack, Scene} from 'react-native-router-flux';
import IndividualDetail from '../screens/IndividualDetail/IndividualDetail';

export default class Routes extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            bagCount: 0
        };
    }
    render() {
      const bagIcon = 
        <TouchableHighlight onPress={() => Actions.wishlist()} style={s.right_container}>
          <View style={s.icon_cont}>
            <View style={s.badge_cont}>
              <Text style={s.abdge_txt}>{this.state.bagCount}</Text>
            </View>
            <Icon name="shopping-cart" size={icon_size} color={colors.white}/>
          </View>
        </TouchableHighlight>

      return (
         <View style={{flex:1}}>
           <Router navigationBarStyle={styles.navbar_style} tintColor="#fff" backTitle=" " titleStyle={styles.title_style}>
             <Stack key="root" hideNavBar={false} >
               <Scene hideNavBar={false} key="individual_detail" component={IndividualDetail}  title="Product Detail" renderRightButton={() => bagIcon}/>
             </Stack>
           </Router>
         </View>
      );
   }
}

IndividualDetail.js

 export default class IndividualDetail extends Component 
 {
    constructor(props){
      super(props);
      this.state = {
         bagCount: 0
      };
    }

    _handleAddToBagBtn = () => {
       //Here I want to change bag total count at header
    }

    ...
 }

感谢您的帮助。

在本机中动态更改购物车项目计数

0 个答案: