在屏幕中间创建可滚动标签的最佳方法？

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

欢呼:)

编辑：毕竟我刚刚找到了一种只使用 react-navigation 的方法：

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

一探究竟

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

Answer 2

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

    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