带有 React Navigation 的 React Native 固定页脚

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 页面中。

首先我尝试在每个 A 和 B 中创建一个页脚，但结果与我想要的不同，请参见下图：

但是当我尝试滑动到标签 B 时，您可以看到页脚未修复：

对此有什么想法吗？

提前致谢！

Answer 1

我询问了贡献者，从现在开始我们有一个完整的例子：

带页脚的自定义标签：

Github example

---

更新

我猜链接坏了，所以我把代码贴在这里：

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;