Как я могу получить Смотреть ниже Материал Нижняя TabNavigator

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
                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>
      );
  };