2

我有以下代码:

<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>
        );
    }
}
4

3 回答 3

1

就我而言,发生这种情况是因为我的项目缺少反应原生矢量图标依赖项。react-native-paper 文档中提到了它。您必须使用以下方式安装它; https://github.com/oblador/react-native-vector-icons#installation

如果它已经安装,请尝试通过转到项目目录>打开 cmd> 运行 npx react-native link react-native-vector-icons 或 react-native link react-native-vector-icons 来链接它作为您的设置

cmd会显示链接成功。

现在再次运行您的应用程序...

于 2020-10-16T05:45:13.540 回答
0

就像@Isaru提到的那样,添加

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

android/app/build.gradle我工作。

于 2021-10-03T10:00:31.740 回答
0

您应该使用 Android 的平台指南。Checkbox.Android 如果您想在整个应用程序中运行 Andoird 平台指南。否则,您可以使用 Checkbox.IOS,您将在整个应用程序中获得 IOS 平台指南复选框。

于 2021-04-12T10:01:35.687 回答