当使用粘性时，组件的样式会更改

发布于 2025-01-23 11:09:10 字数 1795 浏览 4 评论 0原文

我搜索了常见问题以及如何使用stickyheaderindices等。但是坚持一点，我什至没有找到为什么会发生这种情况，因此无法在互联网上进行搜索。

一切都可以在网络上工作，但是当我使用粘性时，我的手机上都没有。

我的滚动视图结构：

<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
    <View style={styles.topBar}>
       <Text style={styles.title}>Messages</Text>
       <View style={styles.notificationIcon}>
          <Text style={styles.notificationIconTxt}>{notificationCount}</Text>
       </View>
    </View>
    <ChatItem pairingCategory={'Name'} />
</ScrollView>

视图我想坚持上方：

泡泡留在文字旁边。

这是我的样式：

const styles = StyleSheet.create({
    layout: {
        flex: 1,
        backgroundColor: colors.lightBg
    },
    topBar: {
        backgroundColor: colors.lightBg,
        paddingVertical: 15,
        paddingLeft: 24,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        alignItems: 'center',
    },
    title: {
        fontSize: 32,
        marginRight: 8,
    },
    notificationIcon: {
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
        width: 30,
        height: 30,
        backgroundColor: colors.mainBg,
        padding: 5
    },
    notificationIconTxt: {
        color: 'white',
        fontWeight: "700"
    }
})

每当我删除stickyheaderindices时，Topbar视图似乎是我想要的，但不粘在顶部。为什么会发生这种情况，我该怎么办？

原文

I've searched common problems and how to use stickyHeaderIndices and so on. But stuck with one point, and I didn't even find why this occurs, so couldn't search on the internet.

Everything works fine on web, but not on my phone when I use sticky.

My Scroll View Structure:

<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
    <View style={styles.topBar}>
       <Text style={styles.title}>Messages</Text>
       <View style={styles.notificationIcon}>
          <Text style={styles.notificationIconTxt}>{notificationCount}</Text>
       </View>
    </View>
    <ChatItem pairingCategory={'Name'} />
</ScrollView>

View that I want to stick on top:

If I use the structure above, it sticks on top but style of the component changes (as in the picture below), I want that bubble to stay next to text.

Here's my styles:

const styles = StyleSheet.create({
    layout: {
        flex: 1,
        backgroundColor: colors.lightBg
    },
    topBar: {
        backgroundColor: colors.lightBg,
        paddingVertical: 15,
        paddingLeft: 24,
        flexDirection: 'row',
        flexWrap: 'nowrap',
        alignItems: 'center',
    },
    title: {
        fontSize: 32,
        marginRight: 8,
    },
    notificationIcon: {
        borderRadius: 15,
        justifyContent: 'center',
        alignItems: 'center',
        width: 30,
        height: 30,
        backgroundColor: colors.mainBg,
        padding: 5
    },
    notificationIconTxt: {
        color: 'white',
        fontWeight: "700"
    }
})

Whenever I delete stickyHeaderIndices, topBar view seems the way I want, but not sticks to top.
Why it happens, and what can I do to solve it?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乙白 2025-01-30 11:09:10

包裹您试图坚持使用＆lt;＆gt;/gt;/gt;的观点

回复收藏 0 原文

打小就很酷 2025-01-30 11:09:10

解决！

我仍然不知道是什么原因，但是创建了称为chatlisttopbar的新组件，然后包装了我的第一个孩子的视图。

function ChatListTopBar({notificationCount}) {
    return (
        <View style={styles.topBar}>
            <Text lineBreakMode='false' style={styles.title}>Mesajlar</Text>
            <View style={styles.notificationIcon}>
                <Text style={styles.notificationIconTxt}>15</Text>
            </View>
        </View>
    )
}

//ScrollView section seems so
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
   <ChatListTopBar notificationCount={notificationCount} />
   <ChatItem pairingCategory={'Name'} />
</ScrollView>

像这样更换，只需解决问题！

Solved!

I still don't know, what was the reason for it, but created new component called ChatListTopBar then wrapped my first children View.

function ChatListTopBar({notificationCount}) {
    return (
        <View style={styles.topBar}>
            <Text lineBreakMode='false' style={styles.title}>Mesajlar</Text>
            <View style={styles.notificationIcon}>
                <Text style={styles.notificationIconTxt}>15</Text>
            </View>
        </View>
    )
}

//ScrollView section seems so
<ScrollView stickyHeaderIndices={[0]} style={styles.layout}>
   <ChatListTopBar notificationCount={notificationCount} />
   <ChatItem pairingCategory={'Name'} />
</ScrollView>

Replacing like so, just fixed the issue!

回复收藏 0 原文

~没有更多了~