logo标签列表

React Native选择器的样式化

javascriptandroidiosreactjsreact-native
37

我正在尝试为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>
1
https://dev59.com/rlkT5IYBdhLWcg3wNs3- - Dmitry Preeternal
点赞支持“卡尔加里”。 :) - Joshua Pinter
试试这个，可能会有帮助： - vibhu
7个回答
26

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

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

要更改文本颜色、背景颜色、字体大小和其他杂项的间距和填充等内容，您可以像下面这样使用 "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>

如果您需要在选择器周围添加边框，可以将Picker包裹在一个View中，并为其提供边框。代码示例如下：

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

愉快的编码 :)

你的回答最好了。itemStyle用于样式化Picker。 - Qui-Gon Jinn
如何在选择器周围添加一个框架？ - shira
@shira，请参考编辑后的答案来应用边框，Picker组件并没有直接提供应用边框样式的方法。 - Jigaroza287
@Jigaroza287 是否可以使用itemStyle为选择器项设置交替背景颜色？ 我希望每个奇数项有一种颜色，每个偶数项有另一种颜色。 - sj_959
在安卓上无法运行。 - Nam Lê Quý
10

正如提到的那样，itemStyle是一种高级属性，只受支持，您可以在React Native文档中看到。因此，在Android上对Picker项进行样式设置，例如更改fontFamily，只能使用本地Android样式，就目前而言。然后它将适用于两个平台。

考虑到这一点，您可以向style.xml文件添加一个新的<style>标签和资源，通常位于路径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中的android:textColor。

有用的链接：

我该如何更改textAlign？ - Oliver D
嗨，Oliver，你可以尝试使用：<item name="android:gravity">center</item>。 - Sayuri Mizuguchi
是的，它可以居中文本，但我正在尝试“左/右”对齐，但它对我不起作用，这就是我需要的。 - Oliver D
1
查看此文章，其中讨论了可能的值。如果你想要左对齐/右对齐，请查看此答案。 - Sayuri Mizuguchi
如何在选择器周围添加框架？ - shira
7

只需将选择器放置在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>
一个例子会更有意义。 - Nate
@Nathileo 我已经按照你的要求添加了一个示例。 - Tapan Dabhi
如何在选择器周围添加一个框架？ - shira
@shira 我不确定你所说的添加框架是什么意思，但你可以将其放在<TouchableOpacity>之后，或者你可以分享给我一个代码片段或图像来说明你需要什么，这样我就可以帮助你。 - Tapan Dabhi
TouchableOpacity是做什么的？什么都不做。 - Rajat
@Rajat，你能详细说明一下吗？ 在示例中，TouchableOpacity被用于将特定（自定义）样式应用于Picker。 - Tapan Dabhi
3

将其包裹在一个 <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
  },
})
1
0
嘿，抱歉 - 当然可以用于更改背景颜色，但我应该澄清一下，我正在尝试更改选择器中项目的颜色。 - n8e
4
好的，我应该进一步解释一下，我并不打算改变背景颜色 - 我试图改变文本的颜色。 - n8e
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接