React Native фиксированный нижний колонтитул с навигацией React

Question

Я использую "react-navigation": "^2.11.2" и имею TabNavigator() с 3 вкладками: A, B и C.

Поэтому я использую:

...
_Profile: {
  screen: TabNavigator(
    {
      First: A,
      Second: B,
      Third: C
    },
    {
      tabBarPosition: "top",
      swipeEnabled: true,
      lazy: false
    }
  ),
  navigationOptions: ({ navigation }) => ({
    header: <ProfileHeader navigation={navigation} />
  })
},
...

Я хочу иметь фиксированный нижний колонтитул на страницах A и B, но НЕ в C.

Сначала я попытался создать нижний колонтитул в каждом А и В, но в результате получилось нечто отличное от того, что я хочу, см. Изображения ниже:

Но когда я пытаюсь провести по вкладке B, вы можете увидеть, что нижний колонтитул НЕ ИСПРАВЛЕН:

Есть идеи по этому поводу?

Заранее спасибо!

Answer 1

Я спросил участников, и теперь у нас есть полный пример:

Пользовательские вкладки с нижним колонтитулом:

Пример Github

---

UPDATE

Я думаю, что ссылка не работает, поэтому я вставляю код здесь:

import React from "react";
import {
  LayoutAnimation,
  View,
  StyleSheet,
  StatusBar,
  Text
} from "react-native";
import { SafeAreaView, createMaterialTopTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import { Button } from "./commonComponents/ButtonWithMargin";

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Home",
    tabBarIcon: ({ tintColor, focused, horizontal }) => (
      <Ionicons
        name={focused ? "ios-home" : "ios-home"}
        size={horizontal ? 20 : 26}
        style={{ color: tintColor }}
      />
    )
  };
  render() {
    const { navigation } = this.props;
    return (
      <SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
        <Text>Home Screen</Text>
        <Button
          onPress={() => navigation.navigate("Home")}
          title="Go to home tab"
        />
        <Button onPress={() => navigation.goBack(null)} title="Go back" />
      </SafeAreaView>
    );
  }
}

class RecommendedScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Recommended",
    tabBarIcon: ({ tintColor, focused, horizontal }) => (
      <Ionicons
        name={focused ? "ios-people" : "ios-people"}
        size={horizontal ? 20 : 26}
        style={{ color: tintColor }}
      />
    )
  };
  render() {
    const { navigation } = this.props;
    return (
      <SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
        <Text>Recommended Screen</Text>
        <Button
          onPress={() => navigation.navigate("Home")}
          title="Go to home tab"
        />
        <Button onPress={() => navigation.goBack(null)} title="Go back" />
      </SafeAreaView>
    );
  }
}

class FeaturedScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    tabBarLabel: "Featured",
    tabBarIcon: ({ tintColor, focused, horizontal }) => (
      <Ionicons
        name={focused ? "ios-star" : "ios-star"}
        size={horizontal ? 20 : 26}
        style={{ color: tintColor }}
      />
    )
  });
  render() {
    const { navigation } = this.props;
    return (
      <SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
        <Text>Featured Screen</Text>
        <Button
          onPress={() => navigation.navigate("Home")}
          title="Go to home tab"
        />
        <Button onPress={() => navigation.goBack(null)} title="Go back" />
      </SafeAreaView>
    );
  }
}

const SimpleTabs = createMaterialTopTabNavigator({
  Home: MyHomeScreen,
  Recommended: RecommendedScreen,
  Featured: FeaturedScreen
});

class TabNavigator extends React.Component {
  static router = SimpleTabs.router;
  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    const { navigation } = this.props;
    const { routes, index } = navigation.state;
    const activeRoute = routes[index];
    let bottom = null;
    if (activeRoute.routeName !== "Home") {
      bottom = (
        <View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
          <Button title="Check out" onPress={() => {}} />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <StatusBar barStyle="default" />
        <SafeAreaView
          style={{ flex: 1 }}
          forceInset={{ horizontal: "always", top: "always" }}
        >
          <SimpleTabs navigation={navigation} />
        </SafeAreaView>
        {bottom}
      </View>
    );
  }
}

export default TabNavigator;