Question

我有一个react native项目，并且我在其中一个屏幕中使用react-navigations底部选项卡导航。

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

我是否需要设置一个回调并传递每个具有访问权限的屏幕，然后在该回调之后重新渲染导航器？ -如果是这样，由于重新渲染，我是否会丢失所有缓存和装入的内容？

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

Answer 1

为此，您必须稍微自定义标签，为此，您需要使用自定义 defaultNavigationOptions中的createBottomTabNavigator。 defaultNavigationOptions引入了React组件的功能，您可以在其中获得诸如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>
    }
  }
});

我添加了一个小示例，无法确定如何向其添加图标，因此只需更改文本，即可将其替换为Icon，这将起作用。 https://snack.expo.io/@subkundu/icon-focused

让我知道是否可行。快乐的编码。：）

反应本机底部标签导航

1 个答案: