react-native-calendars 给出一个自定义样式的例子
时间: 2024-03-09 12:48:23 浏览: 34
好的,下面是一个使用 react-native-calendars 库自定义样式的例子:
```javascript
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
export default function CustomCalendar() {
return (
<View style={styles.container}>
<Calendar
// 自定义日历的整体样式
style={{
borderWidth: 1,
borderColor: 'gray',
height: 300,
}}
// 自定义日期文字的样式
dayTextStyle={{
color: 'red',
}}
// 自定义选中日期的背景色
markingType={'period'}
markedDates={{
'2022-01-01': {
startingDay: true,
color: 'green',
},
'2022-01-02': {
color: 'green',
},
'2022-01-03': {
endingDay: true,
color: 'green',
},
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F5FCFF',
},
});
```
在这个例子中,我们自定义了日历的整体样式、日期文字的样式和选中日期的背景色。可以根据自己的需求自定义更多的样式属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)