react native無法在children元素上設置100％的寬度

Question

我希望每個項目的寬度均為100％。 在樣式塊中添加alignSelf: 'stretch',無效。

請查看下面的圖片！

看起來如何

它應該看起來如何

我的代碼：

<View>
     <ButtonNav style={
                    this.state.currentTab == 'order'
                    ? styles.currentTab
                    : styles.tabItem
                }
                onPress={this.order}
                tagline="BESTÄLLNING" />

</View>

const styles = StyleSheet.create({
    navWrapper: {
        flexDirection: 'row',
        height: 75,
        alignItems: 'center',
        backgroundColor: '#949494',
        flex: 1
    },
    tabItem: {
        justifyContent: 'center',
        borderWidth: 2,
        borderColor: '#333333',
        flexGrow: 1,
        flex: 1
    },
    currentTab: {
        backgroundColor: '#EEEEEE',
        justifyContent: 'center',
        flexGrow: 1,
        borderTopWidth: 2,
        borderTopColor: '#333333',
        flex: 1
    }
});

Answer 1

問題是您有一個View父級而不是flexxed ButtonNav的flex，因此您的flex被忽略了，您可以通過刪除<View>標記來修復它，如果由於某些原因需要它們，只需添加一個flex樣式屬性，我認為這可能會工作：

<View style={{flex:1}}>
     <ButtonNav
         style={
             this.state.currentTab == 'order'
             ? styles.currentTab
             : styles.tabItem
         }
         onPress={this.order}
         tagline="BESTÄLLNING" />

</View>

Answer 2

const styles = StyleSheet.create({
navWrapper: {
    flexDirection: 'row',
    height: 75,
    alignItems: 'center',
    backgroundColor: '#949494',
    justifyContent: 'center'
},
tabItem: {
    borderWidth: 2,
    borderColor: '#333333',
    flexGrow: 1,
    flex: 1,
},
currentTab: {
    backgroundColor: '#EEEEEE',
    flexGrow: 1,
    borderTopWidth: 2,
    borderTopColor: '#333333',
    flex: 1

}}

試試這個應該工作