- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最近,我开始使用来自以下 repo 的日历控件:https://github.com/wix/react-native-calendars最初日历控件正确对齐所有项目,但似乎有些东西完全破坏了对齐。
在此图像上方,您可以看到从升序到降序的顺序相反。使用元素检查器进行更深入的挖掘:
我做了一个消除过程(我认为这可能是由于最近从 React-Navigation 2x 升级到 3x,因为必须显式创建覆盖容器)运气不好。
我尽可能创建了最简单的问题重现并回滚到 React-Navigation 2x。不幸的是,这没有解决问题。
下面附上一些来源:
应用程序.js:
import React from 'react';
import AppNavigator from './navigation/AppNavigator';
export default class App extends React.Component {
render() {
return (
<AppNavigator />
);
}
}
应用导航器:
//#region imports
import {
createSwitchNavigator,
createStackNavigator
} from 'react-navigation';
import {
HomeScreen,
SettingsScreen,
AuthLoadingScreen,
SignInScreen
} from '../screens';
//#endregion
const appStack = createStackNavigator({
Home: HomeScreen,
Other: SettingsScreen
});
const authStack = createStackNavigator({
SignIn: SignInScreen
});
export default createSwitchNavigator({
AuthLoading: AuthLoadingScreen,
App: appStack,
Auth: authStack
}, { initialRouteName: 'AuthLoading'});
主屏幕:
import React, {Component} from 'react';
import {StyleSheet, View, Text, AsyncStorage, Button} from 'react-native';
import Agenda from '../components/Agenda';
export default class HomeScreen extends Component{
logout = async () => {
const userToken = await AsyncStorage.removeItem('userToken');
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
this.props.navigation.navigate('Auth');
}
render(){
return <Agenda/>;
}
}
议程:
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import {Agenda} from 'react-native-calendars';
export default class AgendaScreen extends Component {
constructor(props) {
super(props);
this.state = {
items: {}
};
}
render() {
return (
<Agenda
items={this.state.items}
loadItemsForMonth={this.loadItems.bind(this)}
selected={'2017-05-16'}
renderItem={this.renderItem.bind(this)}
renderEmptyDate={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
// markingType={'period'}
// markedDates={{
// '2017-05-08': {textColor: '#666'},
// '2017-05-09': {textColor: '#666'},
// '2017-05-14': {startingDay: true, endingDay: true, color: 'blue'},
// '2017-05-21': {startingDay: true, color: 'blue'},
// '2017-05-22': {endingDay: true, color: 'gray'},
// '2017-05-24': {startingDay: true, color: 'gray'},
// '2017-05-25': {color: 'gray'},
// '2017-05-26': {endingDay: true, color: 'gray'}}}
// monthFormat={'yyyy'}
// theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
//renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}
/>
);
}
loadItems(day) {
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
const strTime = this.timeToString(time);
if (!this.state.items[strTime]) {
this.state.items[strTime] = [];
const numItems = Math.floor(Math.random() * 5);
for (let j = 0; j < numItems; j++) {
this.state.items[strTime].push({
name: 'Item for ' + strTime,
height: Math.max(50, Math.floor(Math.random() * 150))
});
}
}
}
//console.log(this.state.items);
const newItems = {};
Object.keys(this.state.items).forEach(key => {newItems[key] = this.state.items[key];});
this.setState({
items: newItems
});
}, 1000);
// console.log(`Load Items for ${day.year}-${day.month}`);
}
renderItem(item) {
return (
<View style={[styles.item, {height: item.height}]}><Text>{item.name}</Text></View>
);
}
renderEmptyDate() {
return (
<View style={styles.emptyDate}><Text>This is empty date!</Text></View>
);
}
rowHasChanged(r1, r2) {
return r1.name !== r2.name;
}
timeToString(time) {
const date = new Date(time);
return date.toISOString().split('T')[0];
}
}
const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
flex: 1,
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 17
},
emptyDate: {
height: 15,
flex:1,
paddingTop: 30
}
});
关于代码质量的道歉,所有这些都来自示例。议程样本来源:https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agenda.js
路由器来源:https://reactnavigation.org/docs/en/2.x/auth-flow.html
感谢任何帮助。
最佳答案
虽然回答你自己的问题是一种社会亵渎,就像在公共(public)场合击掌一样,但如果其他人有这个问题,请不要烦恼和压力,耗尽你所有的生命能量。
我做了很多尝试和诊断问题,从创建空白脚手架到查看问题是否仍然存在(它确实存在)。
作为最后的手段,我决定在同事的手机上进行测试(令人惊讶的是,它呈现正确)。
删除 expo 应用程序,重新安装并使用命令 expo start --clear
启动,恢复理智。
关于reactjs - React-native-calendars (wix) 议程 View 对齐中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500637/
也许是一个愚蠢的问题,但我有一个在 Java 文档中没有找到的问题。 Calendar.get(Calendar.DAY_OF_WEEK) 的值是否会根据 Calendar.getFirstDayOf
假设以下代码在 2009 年 8 月 22 日(星期六)执行 Calendar c = Calendar.getInstance(); c.set(Calendar.DAY_OF_WEEK
我正在使用以下代码检查所选月份是否为一月: if (calendar.get(Calendar.MONTH) == Calendar.JANUARY) { ... } 这给了我一个 lint
我有两个 Calendar 变量,分别命名为 calendar1 和 calendar2 其中存储了一些日历值。 我想比较这些变量的 MINUTE 值。 我找到了两种方法,但我想知道有什么区别以及哪一
根据文档 ( here ),Google 提供了一些相同的范围: https://www.googleapis.com/auth/calendar读/写访问到日历 https://www.google
我想问一下,是否可以在不调用 Google 日历 API(需要互联网连接)或启动 native 日历 Activity (不需要)的情况下添加日历事件?只需将日历事件添加到设备 native 日历中(
我们可以从谷歌日历设置中获取工作时间数据吗?我已经了解了日历的 API : https://developers.google.com/calendar/v3/reference/settings/g
我正在尝试使用 Exchange Web 服务访问日历数据,但我似乎无法弄清楚如何访问其他用户共享的日历(当它不是他们的默认日历时)。假设我公司的另一个用户创建了一个共享日历并与我共享,我什至找不到日
我对 Java/Android 中的日期比较有点困惑 DateFormat df = new SimpleDateFormat("dd/MM/yy HH:mm");
我正在使用Google的Calendar API,但遇到了一个问题。当我设置要插入的事件的dateTime时,需要设置小时偏移量,但是由于o DST的原因,它需要一个小时。我可以为日历设置一个属性,以
在Google日历的常规网络用户界面中,当我添加事件时,可以选择将其设置为“提醒”,而不是“事件”。 我正在尝试使用Python API进行复制,但是似乎找不到有关如何执行该操作的信息。我找到的所有文
我们可以使用这个link通过参数向Google日历添加新事件 https://www.google.com/calendar/render? action=TEMPLATE& text=EventNa
除了在纪元显式设置它们之外,是否有任何现有方法可以使用日历 API 来获取填充纪元时间的日历?我所能做的就是获取当前时间。 最佳答案 没有预定义的构造函数或工厂方法来执行此操作,但它相当简单: Cal
我试图在我的应用程序上次更新时显示在 TextView 中(例如,“上次更新时间为 12:13”)。我正在尝试使用 Calendar 实例,我认为我理解正确,但我似乎遇到了麻烦. 我知道要获取一个实例
这个问题在这里已经有了答案: Calendar.before(Object when), why Object? (3 个答案) 关闭 8 年前。 我遇到了问题,因为我试图将日期传递给 Calend
在IOS5上使用获取所有日历时 EKEventStore *eventStore = [[EKEventStore alloc] init]; NSArray * calendars = [event
当我运行以下代码时: int year = 2017; int month = 7; int dayOfMonth = 10; Calendar dateOfBirth = new Gregorian
要么我不理解方法 getActualMaximum(int) 或字段 WEEK_OF_YEAR,要么涉及 Sun 错误(或所有三个)...有人可以向我解释为什么(至少在德语语言环境中...) 以下代码
我正在检查我几年前写的代码。然后我意识到 Android Studio 在 Calendar.AM 处给出了注释,它说它必须是 Calendar.SUNDAY、Calendar.MONDAY 之一等等
我需要将给定日期复制 100 次(我无法通过引用传递)。我想知道以下两个中哪个是更好的选择 newTime=Calendar.getInstance().setTime(originalDate);
我是一名优秀的程序员,十分优秀!