我是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
颜色的输出。给定的红色不起作用。
当我像这样直接给出color
道具时
<Picker.Item color="red" label="Red Picker Item" value="red"/>
有效。
但那并不是我希望它的运作方式。我希望包裹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)如何使其正常工作?
可以在评论中进一步澄清。
答案 0 :(得分:0)
<Picker.Item color='#000'
label={Platform.OS === 'ios'?<Text style={{color:'#000'}}>{label}</Text>:label}
value='' />