Question

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

该问题似乎仅在 Android 7.0 上发生（在真实设备上进行测试， Honor 8 ），并且在One Plus 6（8.1）和Xiaomi上运行良好（我不知道哪个运行7.1）只要我要显示框的所有内容，它就不会渲染到屏幕上，而是仍然需要在ScrollView中显示所需的高度（请参见屏幕）起初，我不明白为什么，因为没有触发任何错误，所以我决定检查logCat并得到此错误：

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

Imgur

所以我尝试了很多事情：

在 AndroidManifest 中

设置android：hardwareAccelerated =“ false” ，此解决方案有效，但滚动时该应用程序很慢一切都放慢了速度（我想避免这种情况）

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

我试图通过在视图中添加/删除组件并引用logCat来了解哪个组件占用了大量空间（以字节为单位），似乎ZestInput占用了大量资源，因为Toggles和Checkboxes的自定义组件（我还尝试使用本机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>
);

}

这是我的期望

Imgur

未显示ReactViewGroup，太大而无法容纳软件布局

0 个答案: