reactjs - 如何在反应原生 UI Kitten 工具包中自定义选定日期的视图

Question

有谁知道如何在 React Native Ui Kitten 套件中自定义所选日期或范围的视图？我已经做了很多谷歌搜索，但仍然没有找到任何答案。我想选择一个特定的日期或日期范围，并在单击按钮时标记该日期或范围。我是 React Native 的新手，如果这是一个愚蠢的问题，请接受我的道歉。提前致谢。

Answer 1

Calendar 组件是一个“受控组件”，这意味着它希望应用程序控制其状态，而不是管理自己。（有关更多信息，请参阅React 文档中的此页面。）

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

1. 监听“onSelect”事件
2. 将选定的日期存储在状态中
3. 将新日期传递回组件。

如果您正在使用反应挂钩，那么您可以使用useState挂钩来保存日期。对于类组件，您需要编写一个处理程序方法来更新状态。两者的例子如下。

使用钩子：

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;

类组件：

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

}