我有以下代码:
<Checkbox.Android
color={`#FA4616`} uncheckedColor={`#FA4616`}
status={'checked'}
onPress={() => {}}
/>
我看到的只是不可见的复选框,尝试删除颜色,也不显示,尝试删除 .Android,仍然没有显示。
react-native-paper 包中的所有其他模块都可以工作,甚至单选按钮,我是否遗漏了什么,该组件的完整代码如下。
尝试了一切,甚至将组件包装在 Provider 中,尝试删除 Portal,加载主题,因为设计了父组件,但复选框仍然不会显示在父组件中,只有复选框应该出现的涟漪效应。
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Card, Checkbox, Dialog, Modal, Portal, Provider, Text} from 'react-native-paper';
import {OutlinedInput} from '../../native/components/UI/OutlineInput';
import {View} from 'native-base';
export default class SelectModal extends Component {
static propTypes = {
save: PropTypes.func.isRequired,
hideModal: PropTypes.func.isRequired,
data: PropTypes.array.isRequired,
title: PropTypes.string.isRequired
};
static defaultProps = {
data: [],
title: ''
};
handleChange = (name, { target: { value, checked }}) => {
const options = this.state[name];
let index;
if (checked) {
options.push(+value)
} else {
index = options.indexOf(+value);
options.splice(index, 1)
}
this.setState({[name]: options})
}
constructor(props) {
super(props);
this.state = {
selectedChoices: [],
filtered: this.props.data
}
}
save = () => {
this.props.save({
selectedChoices: this.state.selectedChoices
})
}
cancel = () => {
this.props.hideModal();
}
search = (value) => {
let currentList = [];
let newList = [];
if (value !== "") {
currentList = this.props.data;
newList = currentList.filter(item => {
const lc = item.name.toLowerCase();
const filter = value.toLowerCase();
return lc.includes(filter);
});
} else {
newList = this.props.data;
}
this.setState({
filtered: newList
});
}
componentDidMount() {
this.setState({
selectedChoices: this.props.selectedData
});
}
render() {
return (
<Portal>
<Modal visible={true} onDismiss={this.cancel()}>
{/*<Dialog.Title style={{ fontSize: 10 }}>{ this.props.title }</Dialog.Title>*/}
{/*<Dialog.Content>*/}
<Card>
<Card.Content>
<OutlinedInput onChangeText={(text) => { this.search(text) }} placeholder="Otsi" className={`mb-4`} />
{ this.state.filtered.map((rs) => (
<View style={{ flexDirection: 'row' }} key={rs.id}>
<Checkbox.Android
color={`#FA4616`} uncheckedColor={`#FA4616`}
status={'checked'}
onPress={() => {
}}
/>
<Text style={{marginTop: 5}}> { rs.name }</Text>
</View>
))}
</Card.Content>
</Card>
{/*</Dialog.Content>*/}
{/*<Dialog.Actions>*/}
{/* <ContainedButton onPress={(e) => {this.save(e)}}>*/}
{/* salvesta*/}
{/* </ContainedButton>*/}
{/*</Dialog.Actions>*/}
</Modal>
</Portal>
);
}
}