如何为react-native-web的FlatList自定义web端webkit滚动条样式

完全可以实现，只需要通过平台判断给web端的FlatList添加专属类名即可，具体操作步骤如下：

步骤1：引入自定义滚动条样式 #

将你写的customScrollbar.css仅在web端入口文件（通常为index.web.js/App.web.tsx等web专属入口）中全局引入即可，原生端打包流程会自动忽略css文件，不会产生冗余代码也不会影响原生端样式。

步骤2：改造FlatList组件代码 #

借助React Native内置的PlatformAPI判断运行环境，仅在web环境下给FlatList添加自定义类名，原生端会自动忽略className属性，不会产生额外影响。

首先导入依赖：

import { Platform, FlatList } from 'react-native'

修改后的FlatList代码如下：

<FlatList
  contentContainerStyle={styles.flatlist_styler}
  // 仅web端添加自定义类名
  className={Platform.select({
    web: 'customScrollbar',
    default: ''
  })}
  data={messages}
  keyExtractor={message => message.id}
  renderItem={({item}) => <Message messageObject={item} />}
/>

兼容旧版本方案 #

如果你使用的react-native-web版本较低，直接给FlatList传className不生效，可以把类名通过scrollViewProps传递：

<FlatList
  contentContainerStyle={styles.flatlist_styler}
  scrollViewProps={Platform.select({
    web: {
      className: 'customScrollbar'
    },
    default: {}
  })}
  data={messages}
  keyExtractor={message => message.id}
  renderItem={({item}) => <Message messageObject={item} />}
/>

可选：兼容Firefox浏览器 #

你当前写的webkit系列样式仅适配Chromium、Safari内核浏览器，如果需要兼容Firefox，可以在customScrollbar.css中补充以下规则：

.customScrollbar {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

内容的提问来源于stack exchange，提问作者Michael Rooplall