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

当我使用反应本地按钮，我不能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。容器中是否有其他子视图？ –

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

回答

相关问题