React Native如何实现Modal高度固定、内部ScrollView内容可滚动

问题根因 #

你当前的实现出现Modal高度失控、ScrollView无法滚动的核心原因是高度约束冲突，以及ScrollView的布局属性配置错误，修复方案如下：

修复步骤 #

• 修正collegueDetail容器的高度配置：你给父容器modalContent设置了maxHeight限制，但内层的collegueDetail直接写死了height: height - 50，这个数值远大于父容器的剩余可用高度，导致内容溢出父容器。将collegueDetail的高度属性替换为flex: 1，让它自动填充modalContent除了关闭按钮、头部信息之外的剩余空间，同时不会超出父容器的maxHeight限制。
• 调整ScrollView相关属性：
  • 给ScrollView添加flexGrow: 1样式，确保内容不足时撑满父容器，内容超出时可正常滚动
  • 移除ScrollView内部包裹文本的View的flex: 1属性，该属性会限制内容高度，导致内容无法撑开ScrollView触发滚动
• 如果需要Modal完全固定高度而非最大高度限制，直接将modalContent的maxHeight属性改为固定height即可，内部滚动逻辑不受影响。

修改后核心代码 #

<Modal transparent={true} animationType={'slide'} visible={visible}>
  <StatusBar barStyle={'dark-content'} />
  <View style={[styles.mainContainer, { width: width - 60 }]}>
    <View
      style={[
        styles.modalContent,
        // 需要固定高度就把下面的maxHeight改成height即可
        { width: width - 50, maxHeight: height - insets.bottom - insets.top - 20 }
      ]}
    >
      <TouchableOpacity onPress={onPressClose}>
        <Close style={styles.closeButton} width={30} height={30} />
      </TouchableOpacity>
      <View style={styles.modalHeader}>
        <Avatar.Image
          style={styles.avatarCollegue}
          size={90}
          source={require('../../../assets/images/collegue1.png')}
        ></Avatar.Image>
        <View style={styles.infoCollegue}>
          <Text style={styles.collegueName}>Sandra Vinke</Text>
          <Text style={styles.collegueJob}>Commerciel Directeur</Text>
        </View>
      </View>
      {/* 这里修改为flex:1 去掉固定高度 */}
      <View style={[styles.collegueDetail, { flex: 1 }]}>
        {/* 这里给ScrollView加flexGrow:1 */}
        <ScrollView style={styles.aboutCollegue} contentContainerStyle={{flexGrow: 1}}>
          {/* 这里去掉外层View的flex:1 */}
          <View>
            <Text style={styles.currentUserDetail}>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui sequi voluptates,
              reprehenderit laborum architecto ex fugiat fugit incidunt aspernatur. Ab corporis
              laborum dolores at eum asperiores obcaecati ipsa deserunt in? Lorem ipsum dolor sit
              amet consectetur adipisicing elit. Aperiam cum minus soluta dignissimos eum
              blanditiis maxime autem, e laborum dolores at eum asperiores obcaecati ipsa deserunt
              {/* 剩余原有文本内容保持不变即可 */}
            </Text>
          </View>
        </ScrollView>
        <TouchableOpacity style={styles.buttonCollegue}>
          <View style={styles.emailButtonCollegue}>
            <Text style={styles.contactCurrentCollegue}>{I18n.t('MYCOLLEGUES.EMAIL_BUTTON')}</Text>
            <Email width={15} height={15} style={styles.iconButton} />
          </View>
        </TouchableOpacity>
      </View>
    </View>
  </View>
</Modal>

内容的提问来源于stack exchange，提问作者Manko