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

Question

已经创建了一个自定义抽屉组件，其中包含一些文本(文本数据来自API(以导航到其他屏幕，但我得到了一个TypeError：当我单击抽屉文本时，undefined不是对象(正在评估'_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>
);
}

提款机内容

调用堆栈

<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}/>}