React Native : ScrollView 용 플렉스가 작동하지 않습니다.

Question

두 개의 하위 뷰와 하나의 ScrollView가있는 간단한 View가 있습니다. ScrollView는 flexbox를 사용하여 같은 레벨의 View보다 5 배 더 커야합니다. 아이들보기에 5 만 렌더링보기에서 모두가 화면의 절반에 정확히 맞는 : 1 플렉스 :

<View style={{ flex: 1}}> 
 
    <View style={{flex: 1, backgroundColor: 'powderblue'}}> 
 
     <Text>Add new stuff</Text> 
 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
 
    </View> 
 
    <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}> 
 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
 
    </ScrollView> 
 
    </View>

그래서 나는 단순히 플렉스 덧붙였다. 두 flex 속성이 무시되는 것처럼 보입니다 ...

Btw, ScrollView 대신 두 번째보기를 사용하면 정상적으로 작동합니다!

모든 아이디어는 ScrollView와 1 : 5 비율을 달성하는 방법?

Answer 1

ScrollView는 flex의 사용을 상속하지 않는 구성 요소입니다. 당신이 원하는 것은 당신이 원하는 플렉스 비율을 생성 할 뷰에 ScrollView를 래핑하는 것입니다.

<View style={{flex: 1}}> 
    <View style={{flex: 1, backgroundColor: 'powderblue'}}> 
     <Text>Add new stuff</Text> 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
    </View> 
    <View style={{flex: 5}}> 
     <ScrollView style={{backgroundColor: 'skyblue'}}> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
     </ScrollView> 
    </View> 
    </View> 

Answer 2

1 달성하기 : 부모 뷰에 대한 하위 구성 요소보기 및있는 ScrollView를 가지고, 5 화면 비율을, 당신은 다음과 같은 방식으로 코딩 할 수 있습니다 : 설명에 대한

<View style={{ flex: 1}}> 
    <View style={{flex: 1/5, backgroundColor: 'powderblue'}}> 
     <Text>Add new stuff</Text> 
     <Button title="Browse Gallery" onPress={ openGallery } /> 
    </View> 
    <ScrollView style={{flex: 4/5, backgroundColor: 'skyblue'}}> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
      <Text style={{ fontSize: 100}}>Scroll me plz</Text> 
    </ScrollView> 
    </View>