2017-02-18 10 views
1

ScrollView는 iOS 시뮬레이터에서 작동하지만 실제로 장치의 지수에서 실행되는 경우 작동하지 않습니다. 터치 릴리즈 이후에는 다시 톱으로 돌아갑니다. 이것이 내 코드의 문제인지 또는 React Native 또는 Exponent 측면의 버그인지 확실하지 않습니다. 0.41React Native, iOS - ScrollView가 장치에서 작동하지 않음

지수 버전 : 14

링크 지수 응용 프로그램 : iOS 시뮬레이터에있는 ScrollView 작업의

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

프리젠 테이션

네이티브 버전 반응 : 여기 내 환경의 세부 사항은 :

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' 
    } 
}); 
+0

안녕하세요 Przemek, 난 scrollview의 유일한 자식은 모든 사용 가능한 공간에 스트레칭 거대한보기가 될 것이므로 당신이 '플렉스 : 1'로 귀하의 캘린더 컨테이너 스타일 안됩니다 생각합니다. 그러나 컨테이너에서'flex : 1'을 제거하면 컨테이너가 자식 높이를 알고 있으므로 scrollview도 마찬가지이므로 잘 작동하는 것을 볼 수 있습니다. 스크롤 뷰에서 긴 달력을 호출하는 대신 컨테이너 뷰를 scrollview로 바꾸는 방법에 대한 조언. 너 달력에 두루마리가 필요해. 그렇지? 그게 도움이되는지 알려 주시면 답을 형식화 할 수 있습니다. – eden

+0

안녕 Enie, 내가 제안한대로 컨테이너 스타일에서 플렉스 : 1을 제거했지만 여전히 지수의 기기에서 작동하지 않았습니다. 나중에 확인한 내용입니다. 나는 Exponent가없는 순수한 React Native 프로젝트에이 사례를 다시 작성하고 Exponent 애플리케이션이없는 실제 장치로 실행하고 ... 제대로 작동 했으므로 아마 일부 지수 버그 일 것 같습니다. 플렉스 및 높이에 관한 제안에 대한 제 코드를 리팩토링하지만 RN 프로젝트에서 왜 작동하는지, 그리고 왜 Exponent 프로젝트에서 작동하지 않는지에 대해서는 여전히 답변하지 않습니다. –

+0

네, 동의합니다. 네이티브 페이스 북 그룹에서이 게시물을 참조하는 것이 좋습니다. 지수 사용자가이 버그를 해결할 수 있습니다. – eden

답변

1

그것은 장치에 지수를 다시 설치 한 후했다. 다시 설치하기 전과 후에 동일한 버전.

+1

지수와 특별히 관련이없는 것으로 나타났습니다. 모든 종류의 라이브러리에서 발생할 수 있습니다. 하지만 나를위한 해결책은 앱을 완전히 제거한 후 다음 번에 문제없이 작동합니다. –

관련 문제