子视图上的 Flexbox 布局不起作用 React Native

Question

尝试使用 put space-between 并使用 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 布局不起作用 React Native

Flexbox layout on child view not working React Native

flexbox

react-native

react-native-flexbox