如何在“材料底部”选项卡导航器下获取“视图”

Question

我想要实现的是这样

因此，有一个“底部”标签导航器，在其下方，我想显示我的自定义视图。

有什么办法可以实现吗？

底部标签代码

const Tabs = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
    },

    Profile: {
      screen: Profile,
    },
    ...
  },
);

export const Root = createStackNavigator({

  Tabs: {
    screen: Tabs,
    navigationOptions: {
      header: null,
    }
  },

  ...

},
{
  initialRouteName: 'Tabs',
});

Answer 1

使用createBottomTabNavigator实际上是不可能的，您可以创建一个水平FlatList来创建标签栏，如下所示：

  <FlatList
                horizontal
                keyExtractor={item => item}
                extraData={this.state}
                showsHorizontalScrollIndicator={false}
                ref={r => (this.tabList = r)}
                data={tabsArray}
                renderItem={this.renderTabHeader}
              />
    ```

and then add renderTabHeader method like this : 


renderTabHeader = ({ item, index }) => {
      return (
        <View style={{ flexDirection: 'column' }}>
          <Text
            onPress={() => {
              if (index !== 4) this.changeIndex(index);
              else
                this.props.navigation.navigate('screenName');
            }}
            style={{
              paddingHorizontal: 16,
              paddingVertical: 8,
              textAlign: 'center',
              color:
                this.state.selectedTab === index
                  ? color.primaryTextColor
                  : color.inactiveTextColor,
              fontFamily: font.medium,
            }}>
            {item}
          </Text>
          {this.state.selectedTab === index ? (
            <View
              style={{
                height: 2,
                width: '100%',
                backgroundColor: 'white',
              }}
            />
          ) : null}
        </View>
      );
  };

Answer 2

您可以制作自定义组件并在导航中像这样使用它：

const Tab = createBottomTabNavigator();
<Tab.Navigator tabBar={(props) => <BottomNavigationBar {...props} />}>
  <Tab.Screen name="blabla" .........
</Tab.Navigator>

BottomNavigationBar 是您的组件，您可以随心所欲地制作