我正在嘗試使用 React-Native 構建導航抽屜，這是我的DrawerItem組件
<DrawerItem
icon={({ color, size }) => (
<MaterialCommunityIcons name="home-outline" size={30} color={colors.medium} />
)}
label="Home"
onPress={() => {
props.navigation.navigate("HomeScreen");
}}
/>
由于這個組件在我的抽屜中被多次使用，我想像這樣創建一個自定義組件
function AppDrawerItem({ label, ScreenName, icon, color = "medium" }) {
return (
<DrawerItem
icon={({ color, size }) => (
<MaterialCommunityIcons name={icon} size={30} color={colors[color]} />
)}
label={label}
onPress={() => {
props.navigation.navigate[ScreenName];
}}
/>
);
}
export default AppDrawerItem;
當我嘗試實作這一點時，我收到以下錯誤
我如何通過ScreenNameas 道具？
這就是我呼叫自定義組件的方式
<DrawerContentScrollView {...props}>
<Drawer.Section style={styles.mainSection}>
<AppDrawerItem
label="Home"
ScreenName="HomeScreen"
icon="home-outline"
/>
</Drawer.Section>
</DrawerContentScrollView>
uj5u.com熱心網友回復：
問題不在于你的ScreenName道具。
您已經將 props 引數解構為
{ label, ScreenName, icon, color = "medium" }這就是為什么它找不到props變數的原因。
你可以做的是這樣的：
function AppDrawerItem({ label, ScreenName, icon, color = "medium", ...props}) {
//...
}
通過這種方式，您可以訪問該props變數。
同樣，當您創建一個DrawerItem名為的 Custom 時AppDrawerItem，您還需要將導航道具傳遞給它。
像這樣做：
<AppDrawerItem
label="Home"
ScreenName="HomeScreen"
icon="home-outline"
navigation={props.navigation}
/>
uj5u.com熱心網友回復：
雖然 OP 已經接受了答案，但我覺得這里有一個缺陷。如果你想傳遞另一個函式onPress事件怎么辦？您設計的組件可重復使用，但僅限于螢屏導航。如果你想，說注銷怎么辦？您可以通過這種方式使您的組件更可重用。
AppDrawerItem像這樣設計
function AppDrawerItem({ label, icon, onPress, color = colors.medium }) {
return (
<DrawerItem
icon={({ color, size }) => (
<MaterialCommunityIcons name={icon} size={30} color={color} />
)}
label={label}
onPress={onPress}
/>
);
}
export default AppDrawerItem;
現在你可以這樣稱呼它
<AppDrawerItem
label="Home"
icon="home-outline"
onPress={() => props.navigation.navigate("HomeScreen")}
/>
在我看來，這是一種更好的方法。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/343131.html
下一篇：資料通過ajax標記白名單