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

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

cmd将显示链接成功。

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

Answer 2

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

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

2 个答案: