Reactjs flex和scrollview的两种不同且错误的结果

我的scrollview和在另一个组件中渲染的视图有问题

这是我的代码：

import React,{Component} from 'react';
import {View, Dimensions, Text, TouchableOpacity, StyleSheet,Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Transition,Transitioning} from "react-native-reanimated";

const transition = (
    <Transition.Together>
        <Transition.In type="fade" durationMs={200} />
        <Transition.Change/>
        <Transition.Out type="fade" durationMs={200}/>
    </Transition.Together>
);

export default class RestaurantMenu extends React.Component{

    constructor(props) {
        super(props);
        this.ref = React.createRef();
        this.state={
            cartItemsAmount: [],
            screenWidth: (Dimensions.get('window').width-10),
            expandOption: []
        }
    }

    returnAmount=(amount)=>{
        if(typeof amount==='undefined'){
            return 0
        }else{
            return amount
        }
    };

    renderMenu = (menu)=>{
        return menu.map((item,index)=>{
            let cartItemArray=this.state.cartItemsAmount;
            let dishNumber = index + 1;
            let windowSize =  '13%';
            if(this.state.expandOption[index]===true){
                windowSize = '30%';
            }
            console.log(this.state.expandOption)
            return(
                <Transitioning.View
                    style={[styles.boxStyle,{width:this.state.screenWidth},{height:windowSize}]}
                    key={index}
                >
                    <Text style={{fontSize:20}}> {dishNumber} {item.name} {'\n\n'}   {item.price}0€ {'\n'}  </Text>

                    <TouchableOpacity
                    style={{position:'absolute',bottom:'2%',left:'2%'}}
                    onPress={()=>this.changeExpandOption(index)}
                    >
                        <Text>Details</Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={()=>{
                            if(typeof cartItemArray[index]==='undefined'){
                                cartItemArray[index]=1;
                            }else{
                                cartItemArray[index]++;
                            };
                            this.setState({cartItemsAmount:cartItemArray});
                        }}
                        style={{position:'absolute',left:'75%',top:'55%'}}
                    >
                        <Icon name='plus' size={25}/>
                    </TouchableOpacity>

                    <Text
                        style={{fontSize:25,position:'absolute',left:'67%',top:'52%',fontWeight:'bold'}}
                    >
                        {this.returnAmount(cartItemArray[index])}
                    </Text>

                    <TouchableOpacity
                    onPress={()=>{
                        if(typeof cartItemArray[index]==='undefined'){
                            cartItemArray[index]=0;
                        }
                        if(cartItemArray[index]===0){
                            cartItemArray[index]=0;
                        }else{
                            cartItemArray[index]--
                        };
                        this.setState({cartItemAmount:cartItemArray});
                    }}
                    style={{position:'absolute',left:'60%',top:'55%'}}
                    >
                        <Icon name='minus' size={25}/>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={()=>{
                        if(cartItemArray[index]!==0){
                        this.props.onPress(item,index,item.name,item.id,cartItemArray[index],item.price);
                        cartItemArray[index]=0;
                        this.setState({cartItemAmount:cartItemArray});
                        }
                    }}
                        style={{position:'absolute',left:'84%',top:'55%'}}

                    >
                        <Icon name='cart-plus' size={25}/>
                    </TouchableOpacity>
                </Transitioning.View>
            )
        })
    };

    changeExpandOption=(number)=>{
        let tempExpandOption = this.state.expandOption;
        tempExpandOption[number] =! tempExpandOption[number];
        this.setState({expandOption: tempExpandOption})
    };

    render(){
        return(
            <View>
                {this.renderMenu(this.props.menu)}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    boxStyle:{
        flexDirection:'row',
        fontSize:20,
        marginBottom:'1%',
        borderRadius:7,
        borderWidth:1,
        borderColor:'#087EA9',
        backgroundColor:'white',
        flex:1
    }

})

import React，{Component}来自'React'；
从“react native”导入{视图、维度、文本、TouchableOpacity、样式表、按钮}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native reanimated”导入{Transition，Transitioning}；
常量转换=(
);
导出默认类RestaurantMenu扩展React.Component{
建造师（道具）{
超级（道具）；
this.ref=React.createRef（）；
这个州={
cartItemsAmount:[]，
屏幕宽度：（Dimensions.get（'window'）。宽度-10），
扩展选项：[]
}
}
返回金额=（金额）=>{
如果（金额类型==='undefined'）{
返回0
}否则{
返还金额
}
};
renderMenu=（菜单）=>{
返回菜单.映射（（项目，索引）=>{
让cartItemArray=this.state.cartItemsAmount；
设数字=指数+1；
让windowSize='13%'；
if（this.state.expandOption[index]==true）{
窗口大小='30%'；
}
console.log（this.state.expandOption）
返回(
{dishNumber}{item.name}{'\n\n'}{item.price}0€{'\n'}
this.changeExpandOption（索引）}
>
细节
{
if（cartItemArray[索引]的类型=='undefined'）{
cartItemArray[索引]=1；
}否则{
cartItemArray[索引]+；
};
this.setState（{cartItemsAmount:cartItemArray}）；
}}
样式={{位置：'absolute'，左：'75%'，顶部：'55%}
>
{this.returnAmount（cartItemArray[index]）}
{
if（cartItemArray[索引]的类型=='undefined'）{
cartItemArray[索引]=0；
}
if（cartItemArray[索引]==0）{
cartItemArray[索引]=0；
}否则{
cartItemArray[索引]--
};
this.setState（{cartItemAmount:cartItemArray}）；
}}
样式={{位置：'absolute'，左：'60%'，顶：'55%}
>
{
if（cartItemArray[索引]！==0）{
this.props.onPress（item、index、item.name、item.id、cartItemArray[index]、item.price）；
cartItemArray[索引]=0；
this.setState（{cartItemAmount:cartItemArray}）；
}
}}
样式={{位置：'absolute'，左：'84%'，顶：'55%}
>
)
})
};
changeExpandOption=（数字）=>{
设tempExpandOption=this.state.expandOption；
tempExpandOption[number]=！tempExpandOption[number]；
this.setState（{expandOption:tempExpandOption}）
};
render（）{
返回(
{this.renderMenu（this.props.menu）}
)
}
}
const styles=StyleSheet.create({
箱式：{
flexDirection:“行”，
尺寸：20，
保证金底部：“1%”，
边界半径：7，
边框宽度：1，
边框颜色：'#087EA9'，
背景颜色：'白色'，
弹性：1
}
})

这是调用RestaurantMenu组件的组件的一个片段：

return(
                <View style={[styles.Background]}>
                    <StatusBar/>
                    {this.orderToggle()}
                    {this.restaurantToggle()}
                    <ScrollView
                        pagingEnabled={true}
                        bounces={true}
                    >
                    <RestaurantMenu menu={RestaurantData[this.restaurantId].card} onPress={this.props.addItemToCart}/>
                    </ScrollView>
                </View>

const styles = StyleSheet.create({
    Background: {
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        paddingTop:28
    }})

返回(
{this.orderToggle（）}
{this.restaurantoggle（）}
const styles=StyleSheet.create({
背景：{
弹性：1，
背景颜色：“白色”，
对齐项目：“居中”，
加油站：28
}})

因此，当我在boxstyle中使用flex:1，在scrollview中使用flex:1时，scrollview可以正常工作，但我无法扩展renderMenu函数的视图。当我在boxstyle中删除flex:1时，scrollview无法工作，但我可以扩展renderMenu函数的视图

有人想知道我做错了什么吗？提前谢谢