react-native - 在 TabBar 控制器内向 RNN 添加持久视图

Question

我想在标签栏内添加一个持久视图，如下所示的 Apple Music 应用程序。

目前，我可以将此组件添加到每个屏幕的底部，但如果有一种方法可以将它附加到选项卡栏，这样应用程序中只有一个它的实例并且它不必重新按下标签的新屏幕呈现。谢谢。

Answer 1

您可以通过定义自己的TabBarComponent.

tabBarComponent您可以像这样添加属性名称TabNavigator-

export const TabBar =  TabNavigator({
    Music: Music,
    Artists: Artists,
    Composers: Composers,
    Recents: Recents,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        return <YourIconComponent color={tintColor} />
      },
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
    },
    tabBarComponent: TabBarComponent,
    tabBarPosition: 'bottom',
  }
);

然后你可以TabBarComponent像这样定义你自己的 -

import React from 'react'
import { TabBarBottom } from 'react-navigation'
import { View, Text } from 'react-native'

class TabBarComponent extends React.PureComponent {
  render() {
    return (
      <View style={styles.yourTabBarContainerStyle}>
        <YourFixedComponent />
        <TabBarBottom {...this.props} />
      </View>
    )
  }
}

export default TabBarComponent;

...

希望能帮助到你。

Answer 2

对于 RNN v2，我使用@guy.gc 的建议解决了这个问题，该建议添加了一个在第一个屏幕的 componentDidMount 上加载的持久覆盖。