reactjs - React-native-calendars (wix) 议程 View 对齐中断

Question

最近，我开始使用来自以下 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

感谢任何帮助。

Answer 1

虽然回答你自己的问题是一种社会亵渎，就像在公共(public)场合击掌一样，但如果其他人有这个问题，请不要烦恼和压力，耗尽你所有的生命能量。

我做了很多尝试和诊断问题，从创建空白脚手架到查看问题是否仍然存在(它确实存在)。

作为最后的手段，我决定在同事的手机上进行测试(令人惊讶的是，它呈现正确)。

删除 expo 应用程序，重新安装并使用命令 expo start --clear 启动，恢复理智。