我搜索了一些常见的问题和如何使用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视图似乎是我想要的方式，但不是粘在顶部。为什么会发生这种情况，我可以做些什么来解决它？