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 prop。我相信这只是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是仅受 iOS平台支持的高级property，如React Native docs here所示。因此，对于在Android上为Picker项设置样式，例如对于{em> now ，只能使用 Android原生样式来更改fontFamily。然后它将在两个平台上都适用。

请牢记这一点，您将在资源中添加一个新的<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标签属性以对其进行样式设置。考虑到这一点，在Android上使用React Native color进行文本字体翻译是android:textColor。

有用的链接：

React Native Picker Android git solved issue。
List of XML dedicated styles来自Android文档-Google

Answer 3

要更改文本颜色，背景颜色，字体大小以及其他杂项内容（如边距和填充），您可以使用＆＃34; itemStyle＆＃34;如下所示：

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

快乐编码：）

Answer 4

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

Answer 5

只需将选择器添加到TouchableOpacity内，并将样式应用于TouchableOpacity。
示例：-

    a=hex(10)
    b=hex(11)
    x = [int(a,16),int(b,16)]
    y = x[0] << 1

    print(x)
    print(y)

Answer 6

将其包裹在 <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 7

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

itemTextStyle: { color: 'red' }

样式反应原生选择器

7 个答案: