react-native-wheel-pick组件Picker样式不生效问题求助

使用react-native-wheel-pick的Picker组件时遇到样式失效问题：外层容器pickerContainer的样式可正常生效，但Picker组件的style、itemStyle中的字体大小等设置均无效果，尝试直接使用内联样式也无法解决。代码实现如下：

<View style={styles.pickerContainer}>
  <Picker
      style={styles.picker}
      selectedValue={selectedHeight}
      itemStyle={{ color: 'black', fontSize: 12 }}
      onValueChange={(value) => setSelectedHeight(value)}
      pickerData={heightData.map(item => `${item.ft} ${item.cm}`)}
      itemSpace={40} 
      highlightColor="transparent" 
      indicatorColor="transparent"
      renderItem={(data, index) => {
          return (
              <View style={[styles.heightItemContainer, index === selectedHeightIndex && styles.highlightedItem]}>
                  <Text style={[styles.heightText, index === selectedHeightIndex && styles.highlightedText]}>
                      {data}
                  </Text>
              </View>
          );
      }}
  />
</View>

由于你使用了renderItem自定义选项渲染逻辑，Picker自带的itemStyle会被自定义组件完全覆盖，因此无法生效。具体解决步骤：

• 移除Picker组件上无效的itemStyle属性
• 直接在自定义的<Text>组件对应的样式（如heightText）中设置字体大小、颜色等样式，或通过内联样式添加

修改后的核心代码示例：

// 自定义Text组件的样式
<Text style={[styles.heightText, index === selectedHeightIndex && styles.highlightedText]}>
  {data}
</Text>

// 对应的StyleSheet配置
const styles = StyleSheet.create({
  // ... 其他已有样式
  heightText: {
    color: 'black',
    fontSize: 12,
    textAlign: 'center' // 可选，保证文字居中对齐
  },
  highlightedText: {
    // 选中项的自定义样式，比如 fontWeight: 'bold'
  },
  heightItemContainer: {
    // 可在这里设置选项容器的宽高、内边距等，替代Picker的style设置
    height: 40
  }
});

如果Picker的style属性也失效，可将原本想设置到Picker的样式（如宽高、对齐方式）转移到自定义的heightItemContainer或外层pickerContainer中。

内容的提问来源于stack exchange，提问作者Megha Kn