Как использовать flex внутри scrollView React Native

Question

Когда я использую ScrollView с содержимым, у которого есть гибкость, они не отображаются, а гибкость, похоже, не работает. Как заставить работать flex внутри ScrollView?

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

const App = (props) => {

  return (
      <ScrollView style={styles.body}>
        <View style={styles.box1} />
        <View style={styles.box2} />
        <View style={styles.box1} />
      </ScrollView>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
    borderColor: 'red',
    borderWidth: 5
  },
  box1: {
    flex: 1,
    backgroundColor: 'blue',
  },
  box2: {
    flex: 2,
    backgroundColor: 'purple',
  }
});

export default App;

Я создал снек . Внутренние представления / блоки не отображаются.

Answer 1

Мне удалось разобраться. Вы создаете другое представление внутри scrollView и фиксируете высоту. Единственная проблема заключается в том, что размер представлений содержимого зависит от высоты этого представления, а не от высоты scrollView.

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
// import { useHeaderHeight } from '@react-navigation/stack';

const App = (props) => {
  let screenHeight = Dimensions.get('window').height;
  // let headerHeight = useHeaderHeight();
  let headerHeight = 0
  let bodyHeight = screenHeight - headerHeight + 500;

  return (
      <ScrollView style={styles.body}>
        <View style={[styles.innerBody, { height: bodyHeight }]}>
          <View style={styles.box1} />
          <View style={styles.box2} />
          <View style={styles.box1} />
        </View>
      </ScrollView>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  innerBody: {
    borderColor: 'red',
    borderWidth: 5
  },
  box1: {
    flex: 1,
    backgroundColor: 'blue',
  },
  box2: {
    flex: 2,
    backgroundColor: 'purple',
  }
});

export default App;

Вот закуска показывает, что он работает.