Question

我自定义TabBarCompenet并尝试传递购物车值，以便可以在值更改时保持更新的购物车。但是应用抛出错误

Undefined is not an object '_this.state.cartAmount'

App.js

var {height, width} = Dimensions.get('window');

  const DashboardTabNavigator = createBottomTabNavigator({
    Tab1: {screen: FoodCategoryStack},
    Tab2: {screen: EventsStack}
   },
   {
    tabBarComponent:({ props }) => ( 
          <AddTabButton {...props} cartAmount={this.state.cartAmount} />
   )});

const DashboardStackNavigator = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator
},
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        header: null,
        headerLeft: <MaterialIcons
          onPress={() => navigation.openDrawer()}
          style={{ paddingLeft: 10 }}
          name="menu"
          size={30}
        />
      };
    }
  }
);

const CustomDrawerComponent = (props) => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ height: 150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', marginTop: 20 }}>

    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: DashboardStackNavigator,
  },
  Events: {
    screen: EventScreen
  }
},
  {
    contentComponent: CustomDrawerComponent,
    drawerWidth: width * 0.85
  });

const AppSwitchNavigator = createSwitchNavigator({
  Welcome: { screen: splashScreen },
  Dashboard: { screen: AppDrawerNavigator }
});

const AppContainer = createAppContainer(AppSwitchNavigator);

export default class App extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        cartAmount: '18.50'
      }
  }
  componentWillMount() {
    console.log('componentWillMount Tab View')
  }
  componentDidMount() {
    console.log('componentDidMount Tab View')
    console.log(this.state.cartAmount)
  }
  HandleTabPressOne () {
    console.log('Cart function called')
    this.setState({ cartAmount: '12.20' });
    alert(this.state.cartAmount)
  }

  render() {
      return ( <AppContainer{...this.props} />);
  }
}

AddTabButton.js

import React, {Component} from 'react';
import {StyleSheet, Animated, Text, TouchableOpacity, View, Dimensions} from "react-native";

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

var {height, width} = Dimensions.get('window');
const AddTabButton = (props) => {

    return (
        <View style={{flex: 0.1, backgroundColor: '#FF0000', borderColor: '#FF0000', borderWidth: 1}}>
        <View style={{flexDirection:'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 5}}>

            <TouchableOpacity onPress={() =>  navigation.navigate('Tab1')} style={{alignItems: 'center', marginLeft: 5}}>
                <MaterialIcons name="local-pizza" size={24} color="#FFFFFF" />
                <Text style={styles.textFAB}>Menu</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.HandleTabPressOne}style={{alignItems: 'center'}}>
                <MaterialIcons name="event-available" size={24} color="#FFFFFF" />
                <Text style={styles.textFAB}>Event</Text>
            </TouchableOpacity>
            <View style={styles.cartFAB}>
                <MaterialIcons name="shopping-basket" size={24} color="#FFFFFF" style={{marginTop: 10}} />
                <Text style={styles.totalCart}>$ {(this.props.cartAmount != null) ? this.props.cartAmount : '12.55'}</Text>
            </View>
        </View>
    </View>
    );
  };

  export default AddTabButton;

Answer 1

根据Andrew的建议，我实施了redux来克服这种情况。

反应本机如何将this.state传递给tabBarComponent

1 个答案: