React Native 底部標簽導航

Question

我有一個 react native 項目，我在其中一個屏幕中使用 react-navigations 底部選項卡導航。

我的問題是我可以根據我所在的屏幕動態更改其中的一個圖標嗎？ 例如，我希望中間的圖標對於所有其他選項卡都是動態的並且不同，當用戶按下某個選項卡時，我希望該圖標發生變化並具有獨特的功能。

我是否需要設置回調並傳入每個可以訪問的屏幕，然后在回調之后重新渲染導航器？ - 如果是這樣，我會因為重新渲染而丟失所有緩存和安裝的內容嗎？

尋找最佳解決方案。 任何答案表示贊賞。 謝謝。

Answer 1

為此，您必須稍微自定義選項卡，為此您需要使用createBottomTabNavigator的自定義defaultNavigationOptions 。 defaultNavigationOptions 接受一個 React 組件的函數，您可以在其中獲得一個 prop，例如focused, tintColor 、 focused, tintColor ，您可以使用它進行一些操作。 如果選項卡被聚焦，您將獲得基於您可以更改圖標的真實值。 例如：

const customTabs = ({ navigation }) => ({
  tabBarIcon: ({ focused, horizontal, tintColor }) => {
    const { routeName } = navigation.state;
    if (routeName === 'PageOne') {
      return <View>{focused ? <Icon name='focused' /> : <Icon name='unfocused' /> }</View>
    } else if (routeName === 'PageTwo') {
      return <Text>{routeName} One</Text>
    } else if (routeName === 'PageThree') {
      return <Text>{routeName} One</Text>
    }
  }
});

我添加了一個小例子，不知道如何給它添加圖標，所以只需更改文本，您就可以將它們替換為圖標，這樣就可以了。 https://snack.expo.io/@subkundu/icon-focused

讓我知道這個是否奏效。 快樂編碼。 :)