样式化 React Native 选择器

Posted 2023-04-13

技术标签:

【中文标题】样式化 React Native 选择器【英文标题】：Styling React Native Picker 【发布时间】：2017-02-27 07:50:08 【问题描述】：

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

我尝试了以下方法：

选择器上的样式颜色

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

【问题讨论】：

***.com/questions/38921492/… 为“卡尔加里”投票。 :) ***.com/questions/57178266/… 试试这个可能对你有帮助 【参考方案1】：

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

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

【讨论】：

【参考方案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>

如果您需要在选择器周围设置边框，您可以将 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 的样式如何在选取器周围添加框架？ @shira，请参考编辑后的答案以应用边框，Picker 不直接提供应用边框样式的方法。 @Jigaroza287 是否可以使用 itemStyle 为选取器项目设置交替背景颜色？我希望每个奇数项目都有一种颜色，每个偶数项目都有不同的颜色。【参考方案3】：

如前所述，itemStyle 是仅由 iOS 平台 支持的高级property，如您在React Native docs here 上所见。因此，对于 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 上搜索 dedicated XML tag 属性 才能对其进行样式设置。考虑到这一点，在 React Native 中将 color 翻译为 Text 字体是 android:textColor 对于 Android。

有用的链接：

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

【讨论】：

如何更改 textAlign？嗨奥利弗，你可以使用：<item name="android:gravity">center</item> 是的，它使文本居中，但我正在尝试“左/右”它不适合我，这就是我需要的看看这个article 谈论可能的值。如果你想左/右，请查看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>

【讨论】：

举个例子会更有意义 @Nathileo 我已按要求添加了一个示例。如何在选取器周围添加框架？ @shira 我不确定你添加一个框架的真正含义，但你可以将它放在之后，或者你可以分享一个代码 sn-p 或描述你的图像需要，所以我可以帮助你。那么 TouchableOpacity 是做什么的？什么都没有。【参考方案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
  ,
)

【讨论】：

【参考方案6】：

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