reactjs - 如何拉伸(stretch)按钮以完全填充容器

Question

当我使用 React Native 按钮时，我无法拉伸(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'
  }

Answer 1

有两种方法可以将 subview 完全填充到它的父 View 。

1. 使用 position: 'absolute' 然后将 top, right, bottom, right 全部设置为零。

2. 父 View 将alignItems 和justifyContent 都设置为stretch(这是默认值，所以不要设置这些样式)，并且子项设置 flex 样式。

如果您的容器只有一个定位到relative 的子容器，您可以使用两种方式。

顺便说一句:使用 StyleSheet.absoluteFill(参见 http://facebook.github.io/react-native/docs/stylesheet.html#absolutefill )您可以获得 StyleSheet 对象，并使用 StyleSheet.absoluteFillObject(参见 http://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject )你可以获得具有这些样式属性的对象

如果你还有一个 subview ，你可以在那个 subview 上使用第一种方式。

注意:我在 https://snack.expo.io/HkIyVVDHW 创建了一个关于 Expo Snack 的演示，您可以在Expo客户端进行预览。