1

ScrollView 适用于 iOS 模拟器，但在设备上的 Exponent 上实际运行时不起作用。触摸释放后返回顶部。我不确定这是我的代码的问题还是 React Native 或 Exponent 方面的错误。以下是我的环境的详细信息：

反应原生版本：0.41

指数版本：14

链接到指数应用程序：

https://exp.host/@prez/hairapp

在 iOS 模拟器上工作 ScrollView 的演示：

https://www.youtube.com/watch?v=3VH-6a-sMok

main.js

import Exponent from 'exponent';
import React from 'react';
import {AppRegistry, Text, Button, View, ScrollView} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Calendar from './modules/calendar';

class CalendarView extends React.Component {
    static navigationOptions = {
        title: 'Calendar'
    }
    render() {
        return (
            <ScrollView>
                <Calendar/>
            </ScrollView>
        )
    }
}

const SimpleApp = StackNavigator({
    Home: {
        screen: CalendarView
    }
});

Exponent.registerRootComponent(SimpleApp);

./modules/calendar/index.js

import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import moment from 'moment';

export default class Calendar extends Component {
    state = {
        reservations: [
            {
                hour: '2017-02-17 00:00',
                duration: 120
            }, {
                hour: '2017-02-17 02:00',
                duration: 60
            }, {
                hour: '2017-02-17 03:00',
                duration: 120
            }, {
                hour: '2017-02-17 05:00',
                duration: 180
            }, {
                hour: '2017-02-17 08:00',
                duration: 120
            }
        ]
    }

    generateIntervalHours() {
        let hours = [];
        // interval has been imported from database configuration, set in minutes
        const interval = 60;
        // current set day, date set only for test purposes
        let it = moment('2017-02-17').hours(0).minutes(0);
        const itEnd = moment(it).hours(23).minutes(59);
        while (it < itEnd) {
            hours.push(moment(it));
            it.add(interval, 'minutes');
        }
        return hours;
    }

    // Function to display hours next to lines/events. Displaying hours and events must be
    // seperated because the line starts in the middle of the hour text and ends in the
    // middle of the next hours text so it would be not possible to display hour and event/line
    // as a single row. Former event block would have to overlay next block to reach middle of the text.
    displayHours = () => (this.generateIntervalHours().map(item => (
        <View key={item.format('HH:mm')} style={styles.hours}>
            <Text style={{
                color: '‎rgb(107, 108, 109)',
                fontSize: 12
            }}>{item.format('HH:mm')}</Text>
        </View>
    )))

    // Function to display lines/events next to hours
    displayTimetable = () => (this.generateIntervalHours().map(hour => {
        const {reservations} = this.state;
        // test current hour if there is reservation
        // that start or lasts during this hour
        const slot = reservations.find(res => {
            const startH = moment(res.hour, 'YYYY-MM-DD HH:mm');
            const endH = moment(startH).add(res.duration, 'minutes');
            return (hour >= startH && hour < endH);
        });
        // no reservation starting with the hour tested
        // no reservation that lasts during the hour tested
        // View with upper border line will be displayed
        // what says that nothing is scheduled for this hour
        if (typeof slot == 'undefined') {
            return (<View key={hour.format('HH:mm')} style={[
                styles.timetable, {
                    height: 60
                }
            ]}/>);
            // reservation found that lasts during the tested hour
            // nothing to display
        } else if (hour.format('YYYY-MM-DD HH:mm') != slot.hour) {
            return null;
            // reservation found with starting hour as tested hour
            // View with height set to duration will be displayed
        } else {
            return <View key={hour.format('HH:mm')} style={[
                styles.timetable, {
                    height: slot.duration,
                    backgroundColor: '‎rgb(32, 127, 227)'
                }
            ]}/>
        };
    }))

    render() {
        return (
            <View style={styles.container}>
                <View>
                    {this.displayHours()}
                </View>
                <View style={styles.timetablePadding}>
                    {this.displayTimetable()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginLeft: 10,
        marginTop: 10,
        marginRight: 10,
        flexDirection: 'row'
    },
    timetablePadding: {
        flex: 1,
        paddingTop: 10
    },
    hours: {
        marginBottom: 40,
        // borderWidth: 1,
        // borderRadius: 2,
        // borderColor: '#ddd',
        marginRight: 10,
        height: 20,
        width: 50,
        justifyContent: 'center'
    },
    timetable: {
        flexDirection: 'row',
        //borderWidth: 1,
        borderRadius: 2,
        //borderColor: '#ddd',
        borderTopColor: '‎rgb(238, 239, 240)',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderBottomColor: 'white'
    },
    line: {
        flex: 1,
        height: 1,
        backgroundColor: 'black'
    }
});
4

1 回答 1

1

它在设备上重新安装 Exponent 后工作。重装前后版本相同。

于 2017-02-19T15:03:52.403 回答