子视图上的弹性框布局不起作用 React Native

Question

尝试使用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

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