릴리스 후 네이티브 ScrollView 스냅을 다시 맨 위로 이동

릴리스 후 네이티브 ScrollView 스냅을 다시 맨 위로 이동

다른 앱에서 ScrollView를 사용한 경우style={styles.container}스타일과 함께그러나 이 앱에서는 내가 가지고 있는 스타일대로 만들고 있다.alignItems:'flex-start'실수를 저지르는 거지style={styles.container}대신 넌 합격해야 해alignItems:'flex-start'을 통해contentContainerStyle={styles.container}.

오류:Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.

그러나 내가 추가할 때contentContainerStyle보기에서 아래로 스크롤할 때, 일단 손가락이 전화기에서 들어올려지면(또는 시뮬레이터에서 마우스를 놓으면), 스크롤은 자동으로 맨 위로 돌아간다.만약 내가 단지 사용한다면style={styles.container}그리고 그것을 꺼낸다.alignItems:'flex-start'스크롤은 정확하지만 UI에 있는 내 아이템들은 내가 필요로 하는 방법이 나와 있지 않다.무엇 때문에 위쪽으로 스크롤되는가?contentContainerStyle그리고 해결책이 있을까?

렌더링:

var _that = this;
var iconsToShow = icons.map(function (icon, i){
  if(i < 81){
    return (
      <TouchableHighlight
        onPress={() => _that.changeIcon(indexToChange, icon)}
        underlayColor='#F7F7F7'
        key={i}>
          <Text style={styles.iconText}><IonIcons name={icon} size={30} color="#555" /></Text>
      </TouchableHighlight>
    );
  }
});

return (
  <Carousel width={SCREEN_WIDTH} animate={false} indicatorColor="#444" inactiveIndicatorColor="#999" indicatorAtBottom={false} indicatorOffset={16}>
    <View>
      <ScrollView contentContainerStyle={styles.container}>{iconsToShow}</ScrollView>
    </View>

    <View>
      //next page for carousel
    </View>

  </Carousel>
);

어떻게 하면 스크롤할 수 있는지 알아냈어.대신View끝내는ScrollView그리고ScrollView유연한 스타일링이나alignItems:'flex-start'와 함께contentContainerStyle={styles.container}, 그것을 위에 놓아라.View어느 것이 가장 어린 아이인가.ScrollView그리고 그냥 사용하다style=대신에contentContainerStyle=.

렌더링:

<ScrollView style={styles.container}>
    <Text style={styles.goalName}>{goal}</Text>
    <View style={styles.viewContainer}>
        {iconsToShow}
    </View>
</ScrollView>

스타일링:

var styles = StyleSheet.create({
    container: {
        backgroundColor: 'transparent',
        paddingLeft:20,
        paddingRight:20
    },
    viewContainer:{
        flexDirection:'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flex: 1
    },
    iconText:{
        paddingLeft:15,
        paddingRight:15,
        paddingTop:15,
        paddingBottom:15
    },
    goalName:{
        textAlign:'center',
        marginTop:40,
        marginBottom:10,
        fontSize:20
    }
});

여전히 문제를 해결할 수 없는 경우 {flex: 1}을(를) ScrollView의 "모든" 부모에 넣어 보십시오.

참조URL: https://stackoverflow.com/questions/34698616/react-native-scrollview-snapping-back-to-top-after-release