我不能使用flexbox进行可触摸的不透明/可按压如何将这两个元素连续对齐?

问题描述

<View style = {{flex : 0.2,backgroundColor : 'white',flexDirection : 'row',justifyContent : 'space-around',alignItems : 'center'}}>
    <pressable style = {{ height : '100%',width : '100%'}}>
    <Image style = {{height : '60%',width : '10%'}} source = {require('../../DataStorage/SymbolsPicture/arrowLeft.png')}></Image> 
    </pressable>
    <pressable style = {{ height : '100%',width : '10%'}} source = {require('../../DataStorage/SymbolsPicture/arrowRight.png')}></Image> 
    </pressable>
    </View> 

What I get

我需要将两个箭头都排在同一行中。

解决方法

仅使用flex是什么:

<View style={{flex: 0.2,backgroundColor: 'white',flexDirection: 'row',justifyContent: 'space-evenly'}}>
    <Pressable style={{flex: 1}}>
        <Image style={{flex: 1}} resizeMode="contain" source = {require('../../DataStorage/SymbolsPicture/arrowLeft.png')}/> 
    </Pressable>
    <Pressable style={{flex: 1}}>
        <Image style={{flex: 1}} resizeMode="contain" source = {require('../../DataStorage/SymbolsPicture/arrowRight.png')}/> 
    </Pressable>
</View>