Picker.Item颜色不起作用反应原生

时间:2018-06-03 14:50:26

标签: javascript reactjs react-native react-native-android jsx

我是react-native的新人。我一直在尝试使用简单的颜色更改来自定义Picker.Item,但它无效。

我创建了一个RedPickerItem类,其Picker.Item包含默认color设置为red

class RedPickerItem extends Component{
    render(){
        return(
            <Picker.Item color="red" {...this.props}/>
        )
    }
}

我用它如下

<Picker
    selectedValue={this.state.pickerValue}
    style={{height: 50, width:'100%'}}
    onValueChange={(itemValue, itemIndex) => this.setState({pickerValue: itemValue})}>
    <RedPickerItem label="Red Picker Item" value="red"/>
    <Picker.Item label="Default Picker Item" value="default"/>
</Picker>

但是我的输出低于显示默认Picker.Item颜色的输出。给定的红色不起作用。

enter image description here

当我像这样直接给出color道具时

<Picker.Item color="red" label="Red Picker Item" value="red"/>

有效。

enter image description here

但那并不是我希望它的运作方式。我希望包裹method正常工作。

完整源代码

import React, {Component} from 'react';
import {Picker, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            pickerValue: ''
        }
    }

    render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.pickerValue}
                    style={{height: 50, width:'100%'}}
                    onValueChange={(itemValue, itemIndex) => this.setState({pickerValue: itemValue})}>
                    <RedPickerItem label="Red Picker Item" value="red"/>
                    <Picker.Item label="Default Picker Item" value="default"/>
                </Picker>
            </View>
        );
    }
}

class RedPickerItem extends Component{
    render(){
        return(
            <Picker.Item {...this.props} color="red" />
        )
    }
}

编辑:

我知道'Picker'有'itemStyle'属性,但是我需要为每个Picker.Item设置单独的项目颜色。

所以我的问题是,

1)为什么当我用另一个类包装它时它不起作用?

2)如何使其正常工作?

可以在评论中进一步澄清。

1 个答案:

答案 0 :(得分:0)

<Picker.Item color='#000'
   label={Platform.OS === 'ios'?<Text style={{color:'#000'}}>{label}</Text>:label}
   value='' />