React Native中的水平ScrollView不包含子级

Question

我试图重新创建我Android Studio中开发利用作出反应本地的应用程序。我有一个FlatList的水平滚动型里面有一些兄弟元素的麻烦。如果ScrollView中的文本足够长，它将扩展到FlatList边界之外，并且还将其兄弟姐妹也推到FlatList之外。

我已经尝试过使用flex，flexgrow，flexshrink的许多不同解决方案

所有这些努力的失败，因为每当我试图弯曲值分配给了滚动的父视图和兄弟姐妹的父母认为，滚动型刚结束消失。我无法找到有关这个问题的任何地方任何事情，一直盯着它几个小时试图解决它。这里是我的代码看起来像什么，它看起来像在屏幕上。任何与之反应熟悉这个问题原住民经验或有什么建议？我真的很感激。

https://ray.readthedocs.io/en/latest/actors.html

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'space-around',
        flexDirection: 'row',
        padding: 10,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8, 
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: '#FFF',
        elevation: 2
    },
    title: {
        flex: 1,
        fontSize: 16,
        color: '#000',
        marginBottom: 5,
        marginTop: 5
    },
    container_text:{
        flex: 1,
        flexDirection: 'column',
        marginLeft: 12,
        justifyContent: 'center'
    },
    description: {
        fontSize: 11,
        fontStyle: 'italic',
    },
    circle: {
        marginLeft: 5,
        marginRight: 5,
        width: 35,
        height: 35,
        borderRadius: 35/2,
        backgroundColor: '#dae0ea',
    },
    percentageText: {
        alignSelf: 'center',
        textAlign: 'center',
        marginTop: 7,
        marginBottom: 7
    }
});

const CustomRow = ({title, percentage}) => (
    <View style={styles.container}>
        <View style={{flexDirection: 'row',
            justifyContent: 'flex-start'}}>
            <ScrollView horizontal={true} scrollEnabled={true}
                contentContainerStyle={{marginLeft: 20, marginRight: 20}}>
                <Text style={styles.title}>
                    {title}
                </Text>
            </ScrollView>
        </View>
        <View style={{flexDirection: 'row',
                    alignContent: 'flex-end',
                    justifyContent: 'flex-end'}}>
            <View style={styles.circle}>
                <Text style={styles.percentageText}>{percentage}%</Text>
            </View>
            <View style={styles.circle}>
            </View>
        </View>
        
    </View>
);

export default CustomRow; 

import React from 'react';
import { FlatList, Text, View, Button,
  StyleSheet, Platform, SafeAreaView  } from 'react-native';
import { createStackNavigator, createAppContainer }
  from "react-navigation";
import AppText from './components/AppWideText.js';
import third from './res/third.json'
import HomeScreenRow from './components/customRows/HomeScreenRow.js';

const programs = third.Pedro_Alvarez_Program;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
  }
});

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerTitleStyle: {
      fontFamily: 'Roboto'
    },
  };
  render() {
    return (
      <View style={{flex: 1, alignItems: "center"
      , justifyContent: "center"}}>
        <AppText>Selected Programs</AppText>
        <View style={styles.container}>
          <FlatList
            data={programs}
            renderItem={({item}) => 
            <View style={{flexWrap: 'wrap'}}>
              <HomeScreenRow 
              title={item}
              percentage={'10'}
            />
            </View>
            }
          />
        </View>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen
}, {initialRouteName: "Home"});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render(){
    return <AppContainer/>;
  }
}