反应导航 v5 自定义抽屉 - 无法调用堆栈 onPress 抽屉文本

Question

已经创建了一个带有一些文本的自定义抽屉组件（文本数据来自 API）以导航到其他屏幕，但我收到类型错误：未定义不是对象（评估'_this4.props.navigation.push') 当我点击抽屉文本时。

抽屉

const Drawer = createDrawerNavigator();

const CreateDrawerNavigator_fun = () => {

  return (
    <Drawer.Navigator
      drawerContent={() => <CustomDrawerContent />}
      drawerStyle={{
        backgroundColor: '#fff',
        width: 300,
      }}>
      <Drawer.Screen name="App" component={createStackNavigator_fun} />
      <Drawer.Screen name="ViewCategory" component={CategoryActivity} />
    </Drawer.Navigator>
  );
}

drawerContent

调用堆栈

<TouchableOpacity
   onPress={() => this.props.navigation.push('ViewCategory', { category_id: item.id, category_name: item.name, category_product_count: item.count })}
 >
     <Text style={styles.filter_menu}>{item.name} </Text>

抽屉内容的完整代码

class CustomDrawerContent extends Component {

  constructor(props) {
    super(props);

    this.state = {

      data: [],
      data1: [],
      isLoading: true,
    };
  }


  byKarat = () => {
    fetch(web_url + 'wp-json/wc/v3/products/attributes/1/terms?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&hide_empty=true')
      .then((response1) => response1.json())
      .then((data1) => {
        this.setState({ data1: data1 });
        console.log('data1 karat', data1);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  byweight = () => {
    fetch(web_url + 'wp-json/wc/v3/products/attributes/2/terms?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&hide_empty=true')
      .then((response2) => response2.json())
      .then((data2) => {
        this.setState({ data2: data2 });
        console.log(data2);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }


  bytags = () => {
    fetch(web_url + 'wp-json/wc/v3/products/tags/?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&hide_empty=true&per_page=100&&hide_empty=true')
      .then((response3) => response3.json())
      .then((data3) => {
        this.setState({ data3: data3 });
        console.log(data3);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  bycategories = () => {
    fetch(web_url + 'wp-json/wc/v3/products/categories/?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&hide_empty=true&per_page=100')
      .then((response4) => response4.json())
      .then((data4) => {
        this.setState({ data4: data4 });
        console.log(data4);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  byjewellery_type = () => {
    fetch(web_url + 'wp-json/wp/v2/jewellery_type?&hide_empty=true')
      .then((response4) => response4.json())
      .then((data5) => {
        this.setState({ data5: data5 });
        console.log('jewellery type .........................', data5);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }

  byDiamond = () => {
    fetch(web_url + 'wp-json/wc/v3/products/attributes/3/terms?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&hide_empty=true')
      .then((response) => response.json())
      .then((data) => {
        this.setState({ data: data });
        console.log(data);
      })
      .catch((error) => console.error(error))
      .finally(() => {
        this.setState({ isLoading: false });
      });
  }



  componentDidMount() {
  
    Promise.all([this.byDiamond(), this.byKarat(), this.byweight(), this.bytags(), this.bycategories(), this.byjewellery_type()])
      .then(([data, data1, data2, data3, data4, data5]) => {
        this.setState({
          data, data1, data2, data3, data4, data5
        });
      });
  }


  render() {

    const { data, data1, data2, data3, data4, data5, isLoading, } = this.state;

    return (
      <View style={{ paddingLeft: 20, paddingTop: 40, }}>
        <View>
          <View style={{ alignItems: 'flex-end', marginRight: 15 }}>
            <TouchableOpacity
              style={{ flexDirection: 'row', alignItems: 'center', }}
            // onPress={() => navigation.closeDrawer()}
            >
              <Image
                style={{ width: 15, height: 15, }}
                source={require('./src/image/cancel.png')}
              />
            </TouchableOpacity>
          </View>
          <ScrollView>

            <View>
              <Text style={styles.filter_title}>Shop By Type</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    data={data5}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <TouchableOpacity onPress={() => new MainActivity().jewellery_type(item.id)}>
                        <Text style={styles.filter_menu}>{item.name} </Text>
                      </TouchableOpacity>
                    )}
                  />
                )}
              </View>
            </View>

            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15 }}></View>

            <View>
              <Text style={styles.filter_title}>Shop By categories</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    data={data4}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <TouchableOpacity
                        onPress={() => this.props.navigation.push('ViewCategory', { category_id: item.id, category_name: item.name, category_product_count: item.count })}
                      >
                        <Text style={styles.filter_menu}>{item.name} </Text>
                      </TouchableOpacity>
                    )}
                  />
                )}
              </View>
            </View>

            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15 }}></View>

            <View >
              <Text style={styles.filter_title}>Shop By Karat</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    data={data1}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <Text style={styles.filter_menu}>{item.name} </Text>
                    )}
                  />
                )}
              </View>
            </View>

            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15 }}></View>

            <View>
              <Text style={styles.filter_title}>Shop By Diamond Weight</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    data={data}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <Text style={styles.filter_menu}>{item.name} </Text>
                    )}
                  />
                )}
              </View>
            </View>

            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15 }}></View>

            <View>
              <Text style={styles.filter_title}>Shop By Weight</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    data={data2}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <Text style={styles.filter_menu}>{item.name} </Text>
                    )}
                  />
                )}
              </View>
            </View>

            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15 }}></View>

            <View >
              <Text style={styles.filter_title}>Shop By Tags</Text>
              <View>
                {isLoading ? <ActivityIndicator /> : (
                  <FlatList
                    style={{ flexDirection: 'row', }}
                    data={data3}
                    numColumns={3}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (
                      <Text style={styles.filter_tags}>{item.name} </Text>
                    )}
                  />
                )}
              </View>
            </View>
            <View style={{ borderBottomColor: '#81818133', borderBottomWidth: 1, marginTop: 15, marginRight: 15, marginBottom: 25 }}></View>
          </ScrollView>
        </View>
      </View>
    );

  }
}

类别活动

export default class CategoryActivity extends Component {

    constructor(props) {
      super(props);
  
      this.state = {
        data: [],
        isLoading: true,
        page: 1,
        per_page: 20
      };
  
    }
  
    componentDidMount() {
      this.setState({ isLoading: true }, this.getData)
      // this.getData()
    }
  
    getData = () => {
      const { category_id } = this.props.route.params;
  
  
      fetch(web_url + 'wp-json/wc/v3/products?consumer_key=' + web_consumerKey + '&consumer_secret=' + web_consumerSecret + '&category=' + category_id + '&per_page=' + this.state.per_page + '&page=' + this.state.page + '&status=publish')
        .then((response) => response.json())
        .then(data => {
          this.setState({ data: this.state.data.concat(data), isLoading: false });
          console.log(data);
        })
        .catch((error) => console.error(error))
    }
  
    renderItem = ({ item, index, }) => {
      let { images, categories, meta_data, id } = item;
  
      if (!images[0]) return null;
      let details = images[0];
  
      if (!id) return null;
      let productid = item.id
  
      return (
  
        <View>
  
          <TouchableOpacity
            style={{
              justifyContent: 'center', alignItems: 'center',
            }}
            onPress={() => this.props.navigation.push('ViewProduct', { productid: item.id, product_name: item.name })}
          >
  
            <Image
              style={{ width: 170, height: 200, borderRadius: 10 }}
              source={{ uri: details.src }}
            />
  
            <View style={styles.gridItemImage}>
              <Text style={{ fontSize: 13, color: 'black', textAlign: 'center' }}>
                {item.name}
              </Text>
              <Text style={styles.gridItemText}>₹ {item.price} </Text>
  
            </View>
          </TouchableOpacity>
          <StatusBar style="auto" />
        </View>
  
      );
    }
  
    // keyExtractor = (item, index) => {
    //   return index.toString();
    // }
  
    handleLoadMore = () => {
      this.setState({ page: this.state.page + 1 }, this.getData)
    }
  
    onScrollHandler = () => {
      this.setState({
        page: this.state.page + 1
      }, () => {
        this.getData(this.state.page);
      });
    }
  

  
    render() {
  
      const { data, isLoading } = this.state;
  
      //getting id from category id and name page 
      const { category_id } = this.props.route.params;
      const { category_name } = this.props.route.params;
      const { category_product_count } = this.props.route.params;
      console.log('render', category_id);
      return (
  
        <View style={{ height: '100%' }}>
  
          <CustomHeader title={category_name} isCategoryPage='true' navigation={this.props.navigation} style={{ height: '10%' }} />
  
  
  
  
          <View style={{ padding: 40, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0d1a4a', height: '15%' }}>
            <Text style={{ color: '#fff', fontSize: 35, }}>{category_name}</Text>
          </View>
  
          <View style={{ height: '75%' }} >
            <ScrollView style={{ backgroundColor: '#FFFFFF' }}>
              <SafeAreaView>
                {isLoading ? <ActivityIndicator size="large" color='#0d1a4a' style={{ marginTop: 50 }} /> : (
  
                  <FlatGrid
                    data={data}
                    style={styles.gridView}
                   // keyExtractor={this.keyExtractor}
                   keyExtractor={(item, index) => index.toString()}
                    renderItem={this.renderItem}
                    enableEmptySections={true}
                    onEndReached={this.onScrollHandler}
                    onEndReachedThreshold={0}
                  // ListFooterComponent={this.renderFooter(category_product_count)}
                  />
  
                )}
              </SafeAreaView >
            </ScrollView>
          </View>
  
  
          <StatusBar style="auto" />
        </View>
      );
    }
  
  }

Answer 1

您必须通过下面的道具才能访问导航道具。

drawerContent={(props) => <CustomDrawerContent {...props}/>}

反应导航 v5 自定义抽屉 - 无法调用堆栈 onPress 抽屉文本

react navigation v5 custom drawer - Can't able to call stack onPress Drawer Text

callstack

navigation-drawer

react-native