Question

尝试使用中间的空格，并使用flexbox扩展出现在叠加弹出屏幕中的按钮。这是屏幕主视图的子视图。除了alignItems之外，什么都没有：'center'似乎在对齐这些按钮。

希望使其他flexbox属性在此子视图上工作的任何帮助

<View style={{ flex: 1 }}>
            <ImageBackground
              style={{ width: Dimensions.get("window").width, height: 300 }}
              source={require("../../resources/img/image.jpeg")}
            />
            <View style={{ marginTop: -20, paddingLeft: 20, paddingRight: 20 }}>
              <MainButton onPress={this.openOverlay} size={MainButtonSize.medium}>
                {this.bookButton}
              </MainButton>
            </View>

            <Overlay
              visible={this.state.modalVisible}
              onClose={this.onClose}
              closeOnTouchOutside
              animationType="zoomIn"
              containerStyle={{ backgroundColor: "rgba(255, 255, 255, 0.78)" }}
              childrenWrapperStyle={{ backgroundColor: "red" }}
              animationDuration={350}
            >
              {(hideModal, overlayState) => (
                <View style={{ alignItems: "center" }}>. <== THIS VIEW
                  <MainButton size={MainButtonSize.large} onPress={this.onStaffPress}>
                    {this.staffButton}
                  </MainButton>

                  <MainButton size={MainButtonSize.large} onPress={this.onServicesPress}>
                    {this.serviceButton}
                  </MainButton>

                  <MainButton size={MainButtonSize.small} onPress={this.onClose}>
                    {this.closeButton}
                  </MainButton>
                </View>
              )}
            </Overlay>
          </View>

Answer 1

请尝试在View标签中设置flex：1

子视图上的Flexbox布局无法正常工作

1 个答案: