Question

我正在使用Beefe's react-native-picker，我想添加自定义样式。

我有一个方法可以将选择器呈现如下：

renderModal() {
        if (!this.state.itemPickerVisible) return;
        return (
            <View>
                {
                    Picker.init({
                        pickerData: map(categories, cat => cat.code + "." + cat.name),
                        pickerTitleText: gettext("Please select"),
                        pickerConfirmBtnText: gettext("Done"),
                        pickerCancelBtnText: gettext("Cancel"),
                        selectedValue: [this.state.selectedValue.code],
                        pickerBg: [255, 255, 255, 1],
                        onPickerConfirm: data => {
                            let code = data[0].substring(0, data[0].indexOf('.'));
                            this.setState({selectedValue: get_category(code), itemPickerVisible: false}, () => this.selectedItem());
                        },
                        onPickerCancel: data => {
                            Picker.hide();
                        },
                        onPickerSelect: data => {
                            console.log(data);
                        }
                    })
                }
                {
                    Picker.show()
                }
            </View>
        )
    }

render方法如下：

render() {
        let value = this.props.value ? this.props.value.name : "";
        return (
            <View style={{
                borderLeftWidth: 4,
                borderLeftColor: this.props.mandatory ? this.props.value == null ? s.paletteMandatory : s.success : '#fff'
            }}>
                {this.renderModal()}
                <ItemDetail locked={this.props.locked} selectItem={this.selectItem.bind(this)}
                            resetItem={this.resetItem.bind(this)} title={this.props.title} value={value}
                            icon={this.props.icon}/>
            </View>
        )
    }

有没有办法将自定义样式（fontFamily，color）添加到选择器项？

Answer 1

如果检查component docs，可以将几个参数传递给init函数。

Picker.init({
        pickerTitleColor: [90, 90, 90, 1], // RGBA values
        pickerData: data,
        selectedValue: [59],
        onPickerConfirm: data => {
            console.log(data);
        },
        onPickerCancel: data => {
            console.log(data);
        },
        onPickerSelect: data => {
            console.log(data);
        }
    });
    Picker.show();

Answer 2

将Component类底部的样式定义为：

<PickerItem style={styles.pickerStyle}>

然后在item标记内引用此样式：

DT

如何风格反应原生选择器

2 个答案: