React 本机纸质复选框设计不起作用，不可见，涟漪效应有效答案

【问题标题】：React native paper checkbox design not working, invisible, ripple effect worksReact 本机纸质复选框设计不起作用，不可见，涟漪效应有效
【发布时间】：2020-07-31 09:31:09
【问题描述】：

我有以下代码：

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

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

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

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

cmd会显示链接成功。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

就像@Isaru 提到的，添加

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

致 android/app/build.gradle 为我工作。

【讨论】：