在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上。