React Native에서 ScrollView가 스크롤되지 않음

debugcn 에 게시 Dev

팔

방금 React Native를 사용하는 방법을 배우기 시작했고 간단한 프로젝트를 만드는 동안 배우고 싶었습니다. 카드 항목의 ScrollView를 만들려고했지만 스크롤 할 수없는 것 같습니다. 나는 flex : 1과 같은 솔루션을 시도하면서 스택 오버플로를 둘러 보았지만 작동하지 않는 것 같습니다.

내 코드는 다음과 같습니다.

<ScrollView contentContainerStyle={{flex:1}}>
          <View style={{flexDirection:'row'}}>
            <View style={{flex:0.5}}> 
              <View style={styles.card}><Text>Test</Text></View>
              <View style={styles.card}><Text>Test2</Text></View>
              <View style={styles.card}><Text>Test3</Text></View>
              <View style={styles.card}><Text>Test4</Text></View>
              <View style={styles.card}><Text>Test5</Text></View>
              <View style={styles.card}><Text>Test6</Text></View>
              <View style={styles.card}><Text>Test7</Text></View>
            </View>
            <View style={{flex:0.5}}> 
              <View style={styles.card}><Text>Testi</Text></View>
              <View style={styles.card}><Text>Testii</Text></View>
              <View style={styles.card}><Text>Testiii</Text></View>
              <View style={styles.card}><Text>Testiv</Text></View>
              <View style={styles.card}><Text>Testv</Text></View>
              <View style={styles.card}><Text>Testvi</Text></View>
              <View style={styles.card}><Text>Testvii</Text></View>
            </View>
          </View>
</ScrollView>

내 CSS :

const styles = StyleSheet.create({
  card:
  {
    height:'20%',
    margin:10,
    borderWidth:1,
    borderColor:'#000',
    borderStyle:'solid',
  }
});

제이 딥 갈라 니

두 자식 뷰 모두에 flex 0.5를 부여했습니다.

따라서 여기에서 내용이 플렉스에서 고정 된 크기가 아닌지 확인하십시오.

이 0.5 플렉스를 제거하고 대신 스크롤 뷰가 볼 수있는 높이 만 사용하도록하는 width:'50%'제거 flex:1를 줄 수 있습니다.

<ScrollView>
          <View style={{flexDirection:'row'}}>
            <View style={{width:"50%"}}> 
              <View style={styles.card}><Text>Test</Text></View>
              <View style={styles.card}><Text>Test2</Text></View>
              <View style={styles.card}><Text>Test3</Text></View>
              <View style={styles.card}><Text>Test4</Text></View>
              <View style={styles.card}><Text>Test5</Text></View>
              <View style={styles.card}><Text>Test6</Text></View>
              <View style={styles.card}><Text>Test7</Text></View>
            </View>
            <View style={{width:"50%"}}> 
              <View style={styles.card}><Text>Testi</Text></View>
              <View style={styles.card}><Text>Testii</Text></View>
              <View style={styles.card}><Text>Testiii</Text></View>
              <View style={styles.card}><Text>Testiv</Text></View>
              <View style={styles.card}><Text>Testv</Text></View>
              <View style={styles.card}><Text>Testvi</Text></View>
              <View style={styles.card}><Text>Testvii</Text></View>
            </View>
          </View>
</ScrollView>

편집 : 보기가 총 크기를 알지 못하기 때문에 정확하게 20 %를 계산할 수 없기 때문에 백분율 대신 고정 된 카드에 높이를 부여하십시오 .

예를 들어 작업을 참조하십시오. https://snack.expo.io/@jdgalani6297/scrolling-issue

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사