React Native无法调整View宽度

Question

我正在尝试创建3个按钮。该按钮之一将具有长文字。我希望他们具有相同的宽度。由于某种原因，当我尝试更改时，宽度不会改变。 在这里看起来如何

看起来宽度是包裹内容。如何解决它，为什么这样？

app.js

import React from 'react';

export default function App() {
  return (
    <CustomScrollView >
      <View2>
        <BtnFeature activeOpacity={0.9} onPress={undefined}>
          <FontAwesome name="user" size={40} color='#fff' />
          <PanelText>Text 1</PanelText> 
        </BtnFeature>
        <BtnFeature activeOpacity={0.9} onPress={undefined}>
          <FontAwesome5 name="user" size={40} color='#fff' />
          <PanelText>Very Long Text</PanelText> 
        </BtnFeature>
        <BtnFeature activeOpacity={0.9} onPress={undefined} >
          <FontAwesome5 name="user" size={40} color='#fff' />
          <PanelText>Text 3</PanelText> 
        </BtnFeature>
      </View2>
    </CustomScrollView>
  );
}

styles.js

export const CustomScrollView = styled.ScrollView`
    margin-top: ${StatusBarHeight - 10}px;
    flex: 1;
    background-color: ${white};
`;

export const PanelText = styled.Text`
    color: ${black}; 
    font-size: 14px;
    font-weight: bold;
    background-color: ${empty}; 
    text-align: center; 
`;

export const View2 = styled.View`
    background-color: ${gray};
    padding: 15px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
`;

export const BtnFeature = styled.View`
    background-color: ${blizzardBlue};
    align-items: center;
    justify-content: center;
    padding: 10px;
    height: 100px;
    width 111px;
    border-radius: 10px;
`;