TouchableOpacity需要

Question

我跟了這後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, 
    }, 

然而，該按鈕正在採用標題留下的所有可用水平空間：

我已經嘗試了很多不同的設置，但仍然無法弄清楚我在這裏做錯了什麼。

Answer 1

剛刪除flex:1。當你添加flex:1到touchableOpacity的風格時，你正準確地告訴它要採取所有可用空間，並像提供的圖像一樣行事。希望這可以幫助！