样式 React Native Picker

Question

我正在尝试在 React Native 选择器中设置项目的文本颜色样式。 到目前为止，我只在 iOS 上工作过，但如果我能找到一个跨平台的解决方案，那就太棒了。

我尝试了以下几件事：

Picker 上的样式颜色

<Picker style={{color:'white'}} ...etc >

选择器项目上的样式颜色

<Picker.Item style={{color:'#fff'}} label={'Toronto'} value={'Toronto'} />

我也看到了一些添加颜色属性的例子，所以我尝试了这个

<Picker.Item color='white' label={'Toronto'} value={'Toronto'} />

在这里完全不知所措。 感谢您的任何见解！

编辑：这是一个解决方案 - 在 Picker 元素中使用 itemStyle 道具。 我相信这只是iOS。

<Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>

Answer 1

要更改颜色，您需要使用：

<Item label="blue" color="blue" value="blue" />

Answer 2

要更改文本颜色、背景颜色、字体大小和其他诸如边距和填充之类的其他内容，您可以使用“itemStyle”，如下所示：

<Picker
    selectedValue={this.state.selectedItem}
    style={{ height: 100, width: 200 }}
    onValueChange={this.onChangeItem}
    itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
>
    {cityItems}
</Picker>

如果您需要选择器周围的边框，您可以将选择器包装在视图中并为其提供边框。 像下面这样：

<View style={{ borderWidth: 1, borderColor: 'red', borderRadius: 4 }}>
    <Picker
        selectedValue={this.state.selectedItem}
        style={{ height: 100, width: 200 }}
        onValueChange={this.onChangeItem}
        itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
    >
        {cityItems}
    </Picker>
</View>

快乐编码:)

Answer 3

如前所述， itemStyle是仅受iOS 平台支持的高级property ，您可以在此处的 React Native 文档中看到。 因此，对于 Android 上的 Picker 项目的样式，例如更改fontFamily只能使用原生 Android 样式来完成，目前。 然后它将适用于两个平台。

考虑到这一点，您可以将带有资源的新<style>标记添加到style.xml文件中，通常在路径中本地化： android/app/src/main/res/values/styles.xml 。 并将其设置在AppTheme以计算添加的样式，例如：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
     <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>

    <!-- Item selected font. -->
    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:fontFamily">casual</item>
    </style>

    <!-- Dropdown options font. -->
    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:fontFamily">casual</item>
      <item name="android:padding">8dp</item>
    </style>
<resources>

重要提示：有时您在 Android 中寻找的样式属性名称与 React Native 中使用的不同。 例如定位，您可能需要使用android:gravity而不是flex 。 因此，您可能需要在 Android 上搜索专用的 XML 标记属性以对其进行样式设置。 考虑到这一点，为文本字体翻译 React Native color是android:textColor for Android。

有用的链接：

• React Native Picker Android git 解决了问题。
• 来自 Android 文档的 XML 专用样式列表- Google

Answer 4

只需在 TouchableOpacity 中添加选择器并将样式应用到 TouchableOpacity。
例子：-

<TouchableOpacity style={[style.textFieldSmall, style.textInput]}>
 <Picker
   style={{color: '#fff', placeholderTextColor: '#fff'}}
   selectedValue={this.state.choosenLabel}
   onValueChange={
   (itemValue, itemIndex) => this.setState({
    choosenLabel: itemValue, 
    choosenindex:itemIndex})
    }
 >
  <Picker.Item label="Purchase" color="white" value="Purchase" />
  <Picker.Item label="YES" value="YES" />
  <Picker.Item label="NO" value="NO" />
 </Picker>
 </TouchableOpacity>

Answer 5

将其包裹在<View> ，

 <View style={styles.card}>
 <Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>
</View>


//Styles
const styles = StyleSheet.create({
card:{
    borderWidth: 1,
    width: 314,
    borderColor: "rgba(155,155,155,1)",
    borderBottomLeftRadius: 10,
    backgroundColor: "rgba(214,210,210,1)",
    marginTop: 10,
    marginLeft: 4
  },
})

Answer 6

试试这个： https : //github.com/caoyongfeng0214/rn-overlay/wiki/Picker

itemTextStyle: { color: 'red' }

Answer 7

您应该尝试使用 backgroundColor 而不是颜色： https : //facebook.github.io/react-native/docs/view.html#style