react-native - scrollview flex react native




flex 1을 사용하는 ScrollView는 스크롤 할 수 없게 만듭니다. (4)

ScrollView 에서 플렉스를 실행하려고하는데, ScrollView의 flex: 1 내부스크롤이 작동하지 않습니다 . 여기에 엑스 코드 피들 (이 코드를 실행하고 함께 플레이 할 수 있습니다) https://snack.expo.io/SySerKNp-

ScrollView 에서 flex: 1 을 제거하면 스크롤이 가능하지만 플렉스 파워 (빨간색 컨테이너를 위쪽 상자 (ScrollView) 위로 밀어 내릴 수있는 능력)를 잃어 버리므로 거기에 플렉스가 있어야합니다 .

ps - 저는 안드로이드에서만 작동합니다. 그리고 저는 아이폰에서 테스트하지 않았습니다 (나는 그 결과를 신경 쓰지 않습니다)

어떤 생각이 내가 뭘 놓치고 있니? flex: 1 이있을 때 ScrollView 가 올바르게 작동하지 않는 이유는 무엇입니까? 감사 !


가장 좋은 방법 은 뷰에 ScrollView래핑 하고 해당 뷰를 flex로 제어하면 스크롤 뷰가 따릅니다.

이것은 약간의 예입니다.

<View style={{flex: 1, flexDirection: 'column',}}>

          <View style={{flex:5, backgroundColor : 'green' }}>
            <ScrollView style={{margin:50, backgroundColor : 'pink' }}>

              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>

            </ScrollView>
          </View>

          <View style={{flex:1, backgroundColor : 'blue' }}>
              <Text> Hello Static View </Text>
          </View>

</View>

귀하의 문제는 당신이 플렉스 = 1 모든 사용 가능한 공간을 차지하도록 ScrollView 말하고 있지만 그 일은 ScrollView가 다르게 작동한다는 것입니다. 그것은 자동으로 모든 자식을 렌더링하므로 flex와는 다르게 작동합니다. 그것은 정상적인 ListView 또는 FlatList에 비해 성능이 좋은 차이점입니다.

나는이 간식이 그 문제를 해결한다고 믿는다 : https://snack.expo.io/SkxN9GOT-

기본적으로, 장치의 높이를 얻고 (screenHeight - 빨간색 상자의 현재 높이)에 따라 고정 된 높이로 ScrollView를 설정합니다.


이 answer 에는 이미 수행 방법이 나와 있습니다.

그러나 여기 왜 당신이 당신의 방법으로 할 수 없는지에 대한 설명이 있습니다. contentContainerStyle 지정된 스타일은 다음과 contentContainerStyle

모든 자식 뷰를 래핑하는 스크롤 뷰 내용 컨테이너에 적용됩니다.

따라서 flex: 1contentContainer 적용하면 부모 View 로 높이가 flex: 1ScrollView 의 전체 높이가 사용됩니다.

당신은 또한 시뮬레이션 할 수 있습니다 -

붉은 상자를 내려서 상자 위쪽으로 밀어 넣을 수있는 능력

ScrollView 부모를 추가하고 부모에 스타일을 적용하여

<View style={styles.root}>
  <View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
    <ScrollView>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box1} />
    </ScrollView>
  </View>
  <View style={{ height: this.state.height, backgroundColor: 'red' }}>
    <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
      <Text>Click</Text>
    </TouchableOpacity>
  </View>
</View>

이것을 시도하면 100 % 문제를 해결할 수 있습니다.

import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{ flex: 1,flexDirection: 'column' }}>
        <View style={{   height: 50, backgroundColor: 'powderblue'}} />
        <View style={{  flex: 1,  backgroundColor: 'skyblue'}} >
            <ScrollView>

<View style={{  flexDirection: 'column' , minHeight: 'fit-content'}} >
 <View style={{    height:150, backgroundColor: 'red'}} />
    <View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />      

 <View style={{    height:150, backgroundColor: '#fff222'}} />
    <View style={{    height:150, backgroundColor: '#555222'}} />           
              </View>

  </ScrollView>
 </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);




react-native-scrollview