如何拉伸按鈕完全填充容器

當我使用反應本地按鈕，我不能STRETCH時它，打擊的是，我使用的按鈕如何拉伸按鈕完全填充容器

myButtonStyle: { 
    flex: 1, 
    borderRadius: 5, 
    alignSelf: 'stretch', 
    backgroundColor: 5, 
    borderWidth: 1, 
    borderColor: '#007aff', 
    marginRight: 5, 
    marginLeft: 5 
    }

和按鈕本身的風格：

<Button 
      style={myButtonStyle} 
      title="Learn More" 
      color="#841584" 
      accessibilityLabel="Learn more about this purple button" 
      />

，這是按鈕包裝的風格

myCardSectioStyle: { 
    borderBottomWidth: 4, 
    padding: 5, 
    backgroundColor: '#ffff00', 
    justifyContent: 'flex-start', 
    flexDirection: 'row', 
    borderColor: '#6600ff', 
    position: 'relative' 
    }

來源

2017-07-15 farmcommand2

我們可以看到按鈕坐落在父容器的樣式嗎？ – Ohgodwhy

@Ohgodwhy我做了 – farmcommand2

有兩種方法可以充分填充子視圖到它的父。

使用position: 'absolute'，然後設置top, right, bottom, right全部爲零。
父視圖設置alignItems和justifyContent既stretch（這是默認值，所以就沒有設置這些樣式），和孩子套flex風格。

如果容器只是有一個孩子是定位到relative，您可以同時使用兩種方式。

BTW：使用StyleSheet.absoluteFill（見http://facebook.github.io/react-native/docs/stylesheet.html#absolutefill），你可以得到一個樣式表對象，並使用StyleSheet.absoluteFillObject（見http://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject）你可以得到具有這些樣式屬性的對象

如果你有一個以上的孩子視圖，您可以在該子視圖上使用第一種方法。

注：我在世博會小吃創建了一個演示https://snack.expo.io/HkIyVVDHW，您可以在世博會客戶端預覽它。

來源

2017-07-15 06:18:10

爲什麼'alignSelf：'stretch'，'不起作用？它壓倒了父母的尊重，不是嗎？ – farmcommand2

對不起，我只是測試你的代碼螞蟻它工作正常。請參閱https://snack.expo.io/Sk4wcvdrZ。容器中是否有其他子視圖？ –

如何拉伸按鈕完全填充容器

回答

相關問題