在構建自定義時，Tab.Screen我嘗試通過自定義tabBarIcon. 當圖示呈現時，它不會導航到組件TestScreen。在我理解的檔案中，應該寫為：tabBarIconTab.Screen
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<TouchableOpacity>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
}}
/>
當我省略options：
<Tab.Screen
name={routes.FOO}
component={TestScreen}
/>
在onClick點擊時呈現的組件。當我閱讀螢屏選項的檔案時，它提到screenOptions應該在導航器或組上傳遞。我試著看看我是否能找到類似的問答：
- React Native react-navigation tabBarIcon 不顯示
- 為什么我的組件不在 Tab.Screen 中呈現？
但我無法看到我的錯誤在哪里。
我當前的依賴項：
"dependencies": {
"@react-navigation/bottom-tabs": "^6.0.5",
"@react-navigation/native": "^6.0.2",
"expo": "~42.0.1",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "^1.10.3",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "^7.9.0"
},
如何讓我的自定義圖示呈現并導航到正確的組件？
uj5u.com熱心網友回復：
您TouchableOpacity與反應導航內部新聞處理程式重疊，只需將您的圖示包裹起來View
如果您想自定義選項卡圖示的按下行為，請將偵聽器物件傳遞給listener道具https://reactnavigation.org/docs/navigation-events/#listeners-prop-on-screen
uj5u.com熱心網友回復：
將此作為答案，希望它可以幫助其他人。睡在這個之后，我Tab.Screen再次檢查了我的，我記得TouchableOpacity它需要一個作業，onPress即使我認為父母會照顧導航，但事實并非如此。
雖然這個答案有點準確，但洗掉TouchableOpacity，它會使圖示作業，代碼：
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={{
tabBarIcon: ({ focused }) => (
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
),
}}
/>
但它違背了自定義按鈕和不透明度變化的目的。仔細觀察后，options我想知道如果我將navigationto傳遞給onPress并使用會navigate怎樣？
好吧，它奏效了，我只剩下：
<Tab.Screen
name={routes.FOO}
component={TestScreen}
options={({ navigation }) => ({
tabBarIcon: () => (
<TouchableOpacity onPress={() => navigation.navigate(routes.FOO)}>
<View style={styles.actionButton}>
<Image source={plus} style={styles.imageIcon} />
</View>
</TouchableOpacity>
),
})}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338120.html
上一篇：有沒有辦法在領域中以正確的方式呈現One2ManyRelation？
下一篇：Leetcode55-跳躍游戲