反應原生不能設置100％寬度的兒童元素

我希望每個項目都是100％的寬度。將alignSelf: 'stretch',添加到樣式塊不起作用。反應原生不能設置100％寬度的兒童元素

請查看下面的圖片！

我的代碼：

<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 
    } 
});

來源

2017-10-06 Jeremy Danner

請提供你的'ButtonNav'代碼。什麼是'StyleSheet'？ –

的問題是，你有一個視圖家長無彎曲到flexxed ButtonNav，所以你flexs被忽略了，你可以通過刪除<View>標籤來修復它，如果您因爲某些原因需要它們，只需向它添加一個flex樣式屬性，我認爲這可能有效：

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

</View>

來源

2017-10-06 12:50:22

謝謝，你是對的！現在感覺真的很愚蠢:(但是，現在對我來說很明顯，萬分感謝！ –

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

}} ）

試試這個它應該工作

來源

2017-10-06 13:04:08

反應原生不能設置100％寬度的兒童元素

回答

相關問題