React 本机纸张复选框设计不起作用，不可见，波纹效果有效

Question

我有以下代码：

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

Answer 1

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

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

cmd 将显示 linking 成功。

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

Answer 2

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

Answer 3

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

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

到 android/app/build.gradle 对我有用。

React 本机纸张复选框设计不起作用，不可见，波纹效果有效

React native paper checkbox design not working, invisible, ripple effect works

react-native

react-native-paper