在屏幕中间创建可滚动选项卡的最佳方法是什么？

Question

当您在个人资料中时，Twitter的移动应用程序在屏幕中间有一个可滚动的选项卡。当您点击屏幕中间的可滚动选项卡时，显示您的个人资料信息等的屏幕的上半部分不会改变：“推文和回复”，“媒体”等。我想知道如何创建这个？有一半的屏幕保持不变，然后有更改屏幕中间的标签......目前我已经将导航标签作为我的主导航 - 所以在其中一个标签（配置文件标签）上我想要创建相同的概念图片..

Answer 1

迟到的答案，但（对于其他人和未来的参考），react-navigation使用这个包，react-native-tab-view：https://github.com/react-native-community/react-native-tab-view

为他们的标签。

你可以在屏幕上嵌入这个，就像你想要的那样（之前的答案只针对导航器中的导航器，这不是你想要的）。

这是一个例子（不完全像你想要的那样，但你明白你可以。所以不用背景图像，把它换掉，然后相应地使用视图或滚动视图来创建那个布局）：

https://snack.expo.io/@satya164/collapsible-header-with-tabview

欢呼:)

编辑：我刚刚找到了一种只使用反应导航的方法：

https://snack.expo.io/@mattx/collapsible-header-tabs

看看这个

和另一个图书馆：https://github.com/benevbright/react-navigation-collapsible

Answer 2

我不知道你是否已经弄清楚了。但是，您可以在StackNavigator中嵌套TabNavigator。这样，您就可以拥有一个可滚动的Tab。

    class ProfileMenu extends React.Component{
    render() {
     return(
      //whatever you wanted at the top 
      )
     }
    }

    const TabNaviga = createMaterialTopTabNavigator({
      Tweets: {screen: TweetScreen,},
      Replies: {screen: RepliesScreen,},
    })

    const YNavigator = createStackNavigator ({
      Home:{screen: TabNaviga,
        navigationOptions: ({navigation}) => ({
          header: <ProfileMenu navigation= {navigation} />,
        })
      }
    })
export default YNavigator