如何在 React Native UI Kitten kit 中自定义选定日期的视图

Question

有人知道如何在 React Native Ui Kitten 工具包中自定义 selected 日期或范围的视图吗？我做了很多谷歌搜索，但仍然没有找到任何答案。我想 select 一个特定的日期或日期范围，并在按钮 clicked.I 时标记该日期或范围，我是 React Native 的新手，如果这是一个愚蠢的问题，请接受我的道歉。提前致谢。

Answer 1

日历组件是一个“受控组件”，这意味着它希望应用程序控制它的状态，而不是它自己管理。（有关详细信息，请参阅 this page from the React docs。）

这意味着要更改所选日期，您需要：

监听“onSelect”事件
将所选日期存储在状态
将新日期传回组件。

如果您使用的是 React 挂钩，则可以使用 useState 挂钩来保存日期。对于 class 组件，您需要编写一个处理程序方法来更新状态。两者的示例如下。

使用钩子：

import React, {useState} from 'react'

import Calendar from '@ui-kitten/components';

const MyCalendar = () => {

    const [date, setDate] = useState(new Date());

    return (
        <Calendar
            date={date}

            {/* other props */}

            onSelect={(d)=>setDate(d)}
        />
    )

};

export default MyCalendar;

Class分量：

import React, {useState} from 'react'
import Calendar from '@ui-kitten/components';

class MyCalendar extends React.Component {

    constructor(props) {
        super(props)
        this.state = {date: new Date()};
    }

    handleDateChange(newDate) {
        this.setDate({
            date: newDate
        })
    }

    render() {
        return (
            <Calendar
                date={this.state.date}

                {/* other props */}

                onSelect={(date)=>this.handleDateChange(date)}
        />
    )
    }

}

如何在 React Native UI Kitten kit 中自定义选定日期的视图

How to customize view in selected date in react native UI Kitten kit

reactjs

react-native

react-hooks

react-native-ui-kitten