样式反应原生选择器

时间:2016-10-18 06:52:51

标签: javascript android ios reactjs react-native

我试图在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>

7 个答案:

答案 0 :(得分:9)

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

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

答案 1 :(得分:6)

如前所述,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

有用的链接:

答案 2 :(得分:4)

要更改文本颜色,背景颜色,字体大小以及其他杂项内容(如边距和填充),您可以使用&#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>

快乐编码:)

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

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

    print(x)
    print(y)

答案 5 :(得分:1)

将其包裹在 <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 :(得分:0)

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

itemTextStyle: { color: 'red' }