React Native 显示列表项时分隔符的宽度不一致

smdnsysy  于 2023-04-22  发布在  React
关注(0)|答案(4)|浏览(129)

下面是显示带有分隔符的列表项的代码

</View>
  <Text style={{padding: 10}}>List Item</Text>
  <View style={{height: StyleSheet.hairlineWidth, backgroundColor: 'grey'}} />
</View>

(请假设我已经多次重复上面的代码以获得列表视图外观)
分隔符中存在一些不一致

这个问题已经被张贴在stack overflowgithub,但还没有任何永久修复这个问题,它已经近2年,因为这些问题已被张贴.
所以,我只想知道最近有没有人找到永久的解决办法。

5vf7fwbs

5vf7fwbs1#

我发现一个通常工作得很好的解决方案是在分频器上添加一个小的余量。

const styles = StyleSheet.create({
  divider: {
    borderBottomColor: '#ccc',
    borderBottomWidth: StyleSheet.hairlineWidth,
    marginVertical: 1,
  },
});

return <View style={styles.divider} />
daolsyd0

daolsyd02#

我发现这是React-Native for Android中的一个bug,React-Native在一个FlatList项的底部呈现一个分隔符,然后在下一个FlatList项的顶部呈现第二个分隔符,而FlatList实际上应该只在每个FlatList项之间呈现一个分隔符。我在添加marginVertical时发现了这个问题:1添加到ItemSeparatorComponent,注意到每个FlatList项之间有两个不同的分隔符。我发现的解决方法是将ItemSeparatorComponent的高度设置为2像素,然后将marginVertical设置为-1像素:

<FlatList
        data={companyGrowthRankings}
        renderItem={renderItem}
        keyExtractor={item => `${Math.random()}`}
        ItemSeparatorComponent={() => <View style={{ width: windowWidth, height: 2, marginVertical: -1, backgroundColor: lessBlack }}></View>}
      />
7cjasjjr

7cjasjjr3#

我看到这是一个旧帖子。但我仍然面临这个问题。我通过将Flatlist中的项目设置为与contentContainerStyle相同的backgroundColor来修复它

<FlatList
        ...
        contentContainerStyle={{
          backgroundColor: 'white',
        }}
        renderItem={({ item }) => (
            </View style={{backgroundColor: 'white'}}>
                <Text style={{padding: 10}}>List Item</Text>
            </View>
          )
        }
      />
xt0899hw

xt0899hw4#

据我所知,这是一个与模拟器和IOS模拟器有关的问题,因为缩放。这只是一个视觉错误。我不认为它会发生在真实的的设备上。
用真实的的设备尝试你的代码,或者如果可能的话,用设备模拟器或模拟器尝试不扩展。

相关问题