Question

当我使用反应原生按钮我无法拉伸它时，打击是我用于按钮的风格

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

有两种方法可以将子视图完全填充到它的父级。

使用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对象，并使用StyleSheet.absoluteFillObject（请参阅http://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject）您可以获得一个对象有那些样式属性

如果您还有一个子视图，则可以在该子视图上使用第一种方式。

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

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

1 个答案: