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

Answer 3

我找到了这个教程并遵循了它，

编辑：似乎有一个支持它的新库https://github.com/PedroBern/react-native-collapsible-tab-view

https://medium.com/@linjunghsuan/implementing-a-collapsible-header-with-react-native-tab-view-24f15a685e07

如果你有兴趣，我还写了一些解释。

在末尾创建一个带有 useRef 和 .current 的 ScrollY

创建一个handleScroll函数，它返回一个像这样的事件 - const handleScroll = Animated.event( [ { nativeEvent: { contentOffset: { y: scrollY }, }, }, ], { useNativeDriver: true, }, );< /p>

在 props 中传递给想要的组件

还有 scrollY 所以你也可以使用 Child 组件中的值

将其进一步传递给实际事件，例如在 Child Child 组件 onScroll 属性中调用 handleScroll。像这样 -

现在您可以随时随地使用 ScrollY 值。

它所做的是检查当前路线是否是我们检查的路线，然后使用我们从这里获得的 flatlist refs 计算 flatlist 的 offset 和 scrollToOffset 函数

return ( { if (ref) { const found = listRefArr.current.find( (e) => e.key === route.key, ); if (!found) { listRefArr.current.push({ key: route.key, value: ref, }); } } }} /> ) ;

onGetRef 连接到 FlatList ref = return ( { return ; }} keyExtractor={({ commentId } ): any => { return commentId.toString(); }} /> ); };

然后我们有这三个函数，我们也发送平面列表 - const onMomentumScrollBegin = () => { isListGliding.current = true; }; const onMomentumScrollEnd = () => { isListGliding.current = false;同步滚动偏移（）； }; const onScrollEndDrag = () => { syncScrollOffset(); };

最后但并非最不重要的一点是，我们仍然需要为 TabBar 设置动画，因此当标题为 500 高度时，当标题为 450 时，标签栏应为 50 时为 0，我们通过在道具中获取 scrollY 和用它来插值。

const renderTabBar = (props: any) => { return ( {

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

3 个答案: