反应原生底部选项卡导航

Question

我有一个反应本机项目，我在其中一个屏幕中使用react-navigation底部选项卡导航。

我的问题是我可以根据我找到的屏幕动态更改其中的一个图标吗？例如，我希望中间图标是动态的，并且对于所有其他选项卡都是不同的，当用户按下某个选项卡时，我希望该图标发生变化并具有独特的功能。

我是否需要设置回调并传入每个有访问权限的屏幕，并在该回调后重新渲染导航器？ - 如果是这样，我会丢失所有缓存和挂载的东西，因为重新渲染？

寻找最佳解决方案。任何答案都表示赞赏。谢谢。

Answer 1

要做到这一点，你必须稍微自定义选项卡，为此你需要在defaultNavigationOptions中使用自定义createBottomTabNavigator。 defaultNavigationOptions接受一个React组件的函数，你可以在其中获得focused, tintColor之类的prop，你可以使用它做一些操作。如果选项卡已聚焦，您将获得一个真正的值，您可以根据该值更改图标。例如：

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>
    }
  }
});

我添加了一个小例子，无法弄清楚如何添加图标，所以只需更改文本，就可以用Icon替换它们，这样就可以了。 https://snack.expo.io/@subkundu/icon-focused

让我知道这个是否奏效。快乐的编码。 :)