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

Question

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

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

Answer 1

您可以定义自己的 TabBarComponent。

您可以像这样在 TabNavigator 中添加一个属性名称 tabBarComponent -

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 上的持久覆盖。

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

Add a persistent view to RNN inside a TabBar controller

react-native

react-native-navigation

wix-react-native-navigation