将“材料顶部标签导航器”放置在自定义位置

Question

在反应导航中使用createMaterialTopTabNavigator，我已经实现了以下目标：

但是，我想将标签移动到页面标题栏下方和作业项目滑块轮播上方。我该如何实现？这是我的代码：

export const MaterialTabNavigation = createMaterialTopTabNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: "Home"
      }
    },
    PopularJobs: {
      screen: PopularJobs,
      navigationOptions: {
        tabBarLabel: "Popular"
      }
    },
    Wishlist: {
      screen: Wishlist,
      navigationOptions: {
        tabBarLabel: "Wishlist"
      }
    }
  },
  {
    initialRouteName: 'Home',    
    tabBarOptions: {
      activeTintColor: primaryColor,
      inactiveTintColor: '#000000',
      upperCaseLabel: false,
      pressColor: '#efefef',
      tabBarPosition: 'top',
      indicatorStyle: {
        backgroundColor: primaryColor,
        height: 2,
      },
      labelStyle: {
        fontSize: 15,
      },
      tabStyle: {
        height: 32,
        marginHorizontal: 15,
      },
      style: {
        backgroundColor: '#ffffff',
        borderBottomWidth: 0,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 0,
        },
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        }
    }
  },
);

Answer 1

您不应该像Docs所说的那样导出createAppContainer(TabNavigator)，而应该将createAppContainer(TabNavigator)放在const中，并像下面的代码一样使用React Component：

export default class HomeScreen extends Component<{}> {
render () {
        return (
            <View>
                  // your other views
                  <TabLayout />
            </View>
        );
    }
}

class OneScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>One</Text>
        </View>
      );
  }
}

class TwoScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>Two</Text>
        </View>
      );
  }
}

class ThreeScreen extends Component<{}> {
  render () {
      return (
        <View>
          <Text>Three</Text>
        </View>
      );
  }
}

const TabNavigator = createMaterialTopTabNavigator({
  One: {
    screen: OneScreen,
    navigationOptions: {
      tabBarLabel: "One"
    }
  },
  Two: {
    screen: TwoScreen,
    navigationOptions: {
      tabBarLabel: "Two"
    }
  },
  Three: {
    screen: ThreeScreen,
    navigationOptions: {
      tabBarLabel: "Three"
    }
  }
},
);

const TabLayout = createAppContainer(TabNavigator);