使用 stickyHeaderIndices 时，组件样式发生变化答案

【问题标题】：When stickyHeaderIndices is used, style of component changes使用 stickyHeaderIndices 时，组件样式发生变化
【发布时间】：2022-12-11 07:39:18
【问题描述】：

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

【问题讨论】：

标签： react-native expo react-native-scrollview react-native-stylesheet

【解决方案1】：

解决了！

我仍然不知道，这是什么原因，但创建了名为 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>

像这样更换，刚刚解决了问题！

【讨论】：

【解决方案2】：

包装您要坚持使用的视图 <>/>

【讨论】：