android - ReactViewGroup 不显示，太大不适合软件布局

Question

问题很简单，但我仍然无法弄清楚它为什么会发生。我需要一些优秀的Android 和/或 React Native 开发人员。我的应用程序中有一个设置页面，它呈现 4 个框（取决于设置的内容，如用户密码、电子邮件修改......），其中一个的内容比其他的多。

问题似乎只出现在Android 7.0（使用真机，荣耀 8测试）上，并且在一加 6（8.1）和小米（我不知道是哪一个，运行 7.1）上运行良好，只要我想要显示框的所有内容，它只是不会渲染到屏幕上，但仍然需要在 ScrollView 中显示所需的高度（见屏幕）一开始我不明白为什么，因为没有触发错误，我决定检查 logCats 并收到此错误：

视图：ReactViewGroup 不显示，因为它太大而无法放入软件层（或绘图缓存），需要 8636760 字节，只有 8294400 可用

伊姆古尔

所以我尝试了多种方法：

在AndroidManifest中设置 android:hardwareAccelerated="false"，此解决方案有效，但是当您滚动时应用程序非常滞后，而且速度有点慢（我很想避免这种情况）

从渲染中删除一些组件，这也可以，但是......显然，我希望我的所有内容都在这个框中

我试图通过在视图中添加/删除组件并引用 logCat 来了解哪个组件占用了大量空间（以字节为单位），似乎 ZestInput 占用了很多空间，作为切换和复选框的自定义组件（我也试过使用本机 TextInput 与我们的自定义输入进行比较，结果并没有那么远……他们机器人占用了很多空间）

render() {
    const {
      textStyle,
      titleTextStyle,
      subtleText,
      boxStyle,
      marginLarge,
      marginSmall,
      marginLeft,
      buttonStyle,
    } = styles;
const { isUpdating, newMail } = this.state;
const { user, emailEdition } = this.props;

const emailTranslation =
  newMail === ''
    ? translations.t('ADD_EMAIL')
    : translations.t('CHANGE_EMAIL');

return (
  <MCollapsableBox
    style={boxStyle}
    headerText={translations.t('APPLICATION_SETTINGS')}
  >
    <View>
      <Text style={[titleTextStyle, marginLarge]}>
        {translations.t('PARAMETERS_CHOOSE_LANGUAGE')}
      </Text>

      {(newMail === '' || emailEdition) && (
        <View>
          <Separation />
          <Text style={[titleTextStyle, marginLarge]}>
            {translations.t('EMAIL')}
          </Text>
          <ZestInput
            //ref={ref => (this.inputRef = ref)}
            placeholder={emailTranslation}
            onChangeText={this.changeMailAddress}
            value={newMail}
          />
          {user.tmpEmail !== '' && (
            <View>
              <Text style={[textStyle, marginSmall]}>
                {translations.t('CURRENT_TMP_MAIL')}
              </Text>
              <Text style={[textStyle, marginLeft]}>{user.tmpEmail}</Text>
              <Text style={[subtleText, marginLeft]}>
                {translations.t('EMAIL_NEEDS_VALIDATION')}
              </Text>
            </View>
          )}
          <PrimaryButton
            onPress={this.onChangeEmail}
            style={buttonStyle}
            isLoading={isUpdating}
            disabled={!this.checkIsEmail(newMail)}
          >
            {emailTranslation}
          </PrimaryButton>
        </View>
      )}

      <Separation />
      <Text style={[titleTextStyle]}>
        {translations.t('PARAMETERS_VISIBILITY')}
      </Text>
      {_.map(this.state.privacyOptions, (value, key) => {
        return (
          <TitledTextToggle
            title={value.text}
            options={value.options}
            onPress={this.toggleChanged}
            key={key}
            id={key}
          />
        );
      })}
      <Separation />
      <Text style={[titleTextStyle, marginSmall]}>
        {translations.t('MOOD_NOTIFICATIONS_SETTINGS')}
      </Text>
      <Text style={[textStyle, marginLarge]}>
        {translations.t('MOOD_NOTIFICATIONS_SETTINGS_TEXT')}
      </Text>
      <CheckboxList
        onPress={this.onPressCheckbox}
        options={this.state.moodNotification}
      />
      <PrimaryButton
        onPress={this.onSave}
        style={buttonStyle}
        isLoading={isUpdating}
      >
        {translations.t('SAVE')}
      </PrimaryButton>
    </View>
  </MCollapsableBox>
);

}

这是我所期望的

伊姆古尔

伊姆古尔

伊姆古尔

标签： androidreact-native