android - 将 Material Top Tab Navigator 放置在自定义位置

Question

在 react 导航中使用 createMaterialTopTabNavigator，我实现了以下目标:



但是，我想将选项卡移动到页面标题栏下方和作业项目 slider 轮播上方。我如何实现这一目标？这是我的代码:

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

你不应该导出 createAppContainer(TabNavigator)就像文档所说的那样，您应该输入 createAppContainer(TabNavigator)在 const 中并像 React 组件一样使用它，如下面的代码:

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