即使设置了宽度，TouchableOpacity 也会占用所有可用空间答案

【问题标题】：TouchableOpacity takes all available space even when width is set即使设置了宽度，TouchableOpacity 也会占用所有可用空间
【发布时间】：2018-03-22 06:33:00
【问题描述】：

我已经按照这个帖子-React Native flex-box align icon and text 制作了一个标题如下的按钮：

<View style={styles.sectionHeaderContainer}>

  <Text style={styles.heading}>Work</Text>

  <TouchableOpacity
  style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
  onPress={() => {
    this.setState(previousState => {
      Alert.alert('You tapped the button!')
    });
  }}>
    <Image source={addIcon}/>
    <Text style={styles.tertirayTitleDark}>Add Work</Text> 
  </TouchableOpacity>

</View>

样式表如下：

  sectionHeaderContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    paddingHorizontal: "6%", 
    paddingTop: "12%",
  },
  heading: {
    fontSize: TITLE,
    fontWeight: 'bold',
    color: THEME_COLOR,
    backgroundColor:'transparent',
  },
  tertirayTitleDark: {
    fontSize: CONTENT_LARGE,
    fontWeight: 'bold',
    color: COLOR_DARK_PRIMARY,
  },

但是按钮占用了标题留下的所有可用水平空间：

我尝试了许多不同的设置，但仍然无法弄清楚我在这里做错了什么。

【问题讨论】：

标签： javascript react-native flexbox

【解决方案1】：

只需删除flex:1。当您将flex:1 添加到 touchableOpacity 的样式时，您正是在告诉它占用所有可用空间并像提供的图像一样行事。希望这会有所帮助！

【讨论】：