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

Question

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

Answer 1

日历组件是一个"受控部件"；这意味着它希望应用程序控制其状态，而不是管理自己。(有关更多信息，请参阅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)}
/>
)
}
}