样式不适用于react-native-wheel-pick

Question

样式不适用于react-native-wheel-pick的选择器。

这是我的选择器，

 <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>

“pickerContainer”的样式有效，但“picker”不起作用，字体大小也没有变化，样式中没有任何反映。

我尝试直接对选择器组件进行内联样式，但它不起作用。

Answer 1

您必须在 ItemStyle 中添加 fontSize，它可以反映您在 android 上的更改，但您需要硬重新加载才能在 android 上获取更改。

在 ios Picker 中提供一个 textSize 属性，您可以更改其上的 textSize 。

这是我使用的代码

<Picker
   textSize={18}
   textColor={colors.themewhite}
   selectedValue={value}
   isShowSelectLine={false}
   style={styles.categoryAndSubCategoryStyle}
   itemStyle={{
     left: 9, 
     width: 180,  
     overflow: 'hidden',  
     flex: 1,
     height: moderateScale(180),
     fontSize: moderateScale(15),
     color: colors.themewhite,
     borderRadius: moderateScale(20),},
   ]}
   pickerData={Array}
   onValueChange={data => {
     // Do Anything  
   }}
/>

它将解决您的问题。