Header中的分段控制

Question

我试图在我的 header 中添加一个分段标签，让我在开始之前给你看一个例子。

如果您使用过 twitter 应用程序，您知道您可以在这些选项卡上滑动而这些选项卡仍保留在 header 上，我不知道如何完成此操作

部分代码：

 <Stack.Screen name="Find" component={Home} options={{
            header: () => (
                <View style={{ backgroundColor: 'black', paddingBottom: 10 }}>
                    <View style={{ paddingLeft: 10, flexDirection: 'row', paddingTop: 25, backgroundColor: 'black' }}>
                        <View style={{}}>
                            <View style={{ paddingRight: 10, flexDirection: 'row', alignItems: 'center' }}>
                                <View>
                                    <Image style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../assets/forever.png'} />
                                </View>
                                <View style={{ width: '84%', paddingHorizontal: 10 }}>
                                    <Formik
                                        initialValues={{ formData: "" }}
                                        onSubmit={async (values, { setSubmitting }) => {
                                            setSubmitting(true)
                                            await setData({
                                                values
                                            })
                                            console.log(sdata)
                                            setSubmitting(false)
                                        }}
                                    >
                                        {({ handleChange, handleBlur, handleSubmit, values }) => (
                                            <>

                                                <View
                                                    style={{
                                                        backgroundColor: '#0D0D0D',
                                                        padding: 10,
                                                        borderRadius: 18,
                                                        flexDirection: 'row',
                                                        height: 34
                                                    }}
                                                >
                                                    <View style={{ alignItems: 'center' }}>
                                                        <Icon name="search" type="ionicon" size={15} color="grey" />
                                                    </View>
                                                    <TextInput
                                                        autoCorrect={false}
                                                        clearButtonMode="always"
                                                        placeholderTextColor="grey"
                                                        onChangeText={handleChange('formData.form')}
                                                        value={values.formData.form}
                                                        onBlur={handleBlur('formData')}
                                                        placeholder="Search"
                                                        style={{ backgroundColor: '#0D0D0D', paddingHorizontal: 20 }}
                                                    />
                                                </View>
                                            </>
                                        )}
                                    </Formik>


                                </View>
                                <View style={{ flexDirection: 'row' }}>
                                    <Icon onPress={() => create.current.show()} type="ionicon" size={28} color="white" name="create-outline" />
                                </View>
                            </View>

                        </View>

                    </View>
                    <ScrollableTabView style={{}} renderTabBar={() =>
          <DefaultTabBar
            style={{
              borderWidth: 0,
            }}
          />
        } tabBarUnderlineStyle={{ backgroundColor: "#fff", borderWidth: 1}} tabBarTextStyle={{ color: "#fff" }} tabBarBackgroundColor="#000">
          <View tabLabel="Home">

          </View>
          <Quotes tabLabel="Quotes" />
          <View tabLabel="Posts" >

          </View>
          <View tabLabel="Home" >

          </View>
         
        </ScrollableTabView>
                </View>
            ),

        }} />

如果您需要更多信息，请评论并感谢