React Native，iOS-ScrollView不'；不要在设备上工作

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

React本机版本：0.41

指数版本：14

指向Exponent应用程序的链接：

在iOS模拟器上显示工作滚动视图：

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);

从“指数”导入指数；
从“React”导入React；
从“react native”导入{AppRegistry，Text，Button，View，ScrollView}；
从“react navigation”导入{StackNavigator}；
从“./modules/Calendar”导入日历；
类CalendarView扩展了React.Component{
静态导航选项={
标题：“日历”
}
render（）{
返回(
)
}
}
const simpleap=StackNavigator({
主页：{
屏幕：日历视图
}
});
指数.RegisterRotComponent（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'
    }
});

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet}；
从“力矩”中导入力矩；
导出默认类日历扩展组件{
状态={
保留：[
{
时间：2017-02-17 00:00，
持续时间：120
}, {
时间：2017-02-17 02:00，
持续时间：60
}, {
时间：2017-02-17 03:00，
持续时间：120
}, {
时间：2017-02-17 05:00，
持续时间：180
}, {
时间：2017-02-17 08:00，
持续时间：120
}
]
}
生成间隔时间（）{
让小时数=[]；
//间隔已从数据库配置导入，以分钟为单位设置
常数间隔=60；
//当前设置日期，仅为测试目的设置的日期
假设它=时刻（'2017-02-17'）。小时（0）。分钟（0）；
const itEnd=时刻（it）.小时（23）.分钟（59）；
而（它（此.generateIntervalHours（）.map（项=>(
{item.format（'HH:mm'）}
)))
//用于显示小时旁边的行/事件的函数
displaytime=（）=>（this.generateIntervalHours（）.map（hour=>{
const{reservations}=this.state；
//如果有预约，测试当前小时数
//在这一小时内开始或持续的
const slot=reservations.find（res=>{
const startH=力矩（相对小时，'YYYY-MM-DD HH:MM'）；
const endH=时刻（开始）。加上（持续时间，'分钟'）；
返回（小时>=开始时间和小时<结束时间）；
});
//从测试时间开始没有预订
//没有在测试时间内持续的预订
//将显示带有上边框线的视图
//怎么说这个小时没有安排什么
如果（插槽类型==“未定义”）{
返回（）；
//发现的保留在测试时间内持续
//没什么可展示的
}else if（hour.format（'YYYY-MM-DD HH:MM'）！=slot.hour）{
返回null；
//找到以开始小时为测试小时的预订
//将显示高度设置为持续时间的视图
}否则{
返回
};
}))
render（）{
返回(
{this.displayHours（）}
{this.displaytime（）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
边缘左：10，
玛金托普：10，
marginRight:10，
flexDirection:“行”
},
时间表填充：{
弹性：1，
加油站：10
},
工作时间：{
marginBottom:40，
//边框宽度：1，
//边界半径：2，
//边框颜色：'#ddd'，
marginRight:10，
身高：20，
宽度：50，
为内容辩护：“中心”
},
时间表：{
flexDirection:'行'，
//边框宽度：1，
边界半径：2，
//边框颜色：'#ddd'，
borderTopColor:'‎rgb（238239240）'，
边框宽度：1，
边界宽度：1，
边框底部颜色：“白色”
},
行：{
弹性：1，
身高:1,，
背景颜色：“黑色”
}
});

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

嘿，Przemek，我认为你不应该用

flex:1

设置日历容器的样式，因为scrollview的独生子视图将是一个延伸到所有可用空间的巨大视图。但是，如果删除容器中的

flex:1

，您将看到它工作得很好，因为现在容器知道它们的子对象的高度，所以scrollview也知道。我的建议是用scrollview替换容器视图，而不是在scrollview中调用长日历。这是你的日历需要滚动，不是吗？让我知道这是否有帮助，这样我就可以格式化我的答案了。正如你所建议的，我从容器样式中删除了flex:1，但这在Exponent上的设备上仍然不起作用。我后来查的。我已经重写了这个案例，使之成为没有Expone的纯React原生项目