Question

我有一个错误：用户单击调查，然后打开所谓的支持信息，从而进一步扩展用户界面，然后用户选择答案，然后单击“下一个问题”按钮，此时，整个屏幕顶部下降，露出了巨大的缝隙。我认为这是控制所有行为的代码：

class BallotSurveyDetails extends PureComponent {
  componentDidUpdate(prevProps) {
    if (prevProps.currentWizardPage !== this.props.currentWizardPage) {
      this.scroll.props.scrollToPosition(0, 0, true);
    }
  }

  render() {
    const {
      currentWizardPage,
      selectedSurvey,
      handleNextQuestionButtonPress,
      handleResponseChanged,
      loading,
      responses,
      handleSubmitButtonPress,
      saving,
      wizardPages
    } = this.props;
    if (!saving && loading) {
      return <Loading />;
    }

    const isWizard = selectedSurvey.Layout !== "Wizard";

    const isList = selectedSurvey.Layout !== "List";

    const displayNextQ = isWizard && currentWizardPage < wizardPages;

    const displaySubmit =
      isList || (isWizard && currentWizardPage === wizardPages);

    const sortedGroups = (selectedSurvey.QuestionGroups || []).sort(
      (a, b) => a.Order - b.Order
    );

    const wizardGroup = isWizard ? sortedGroups[currentWizardPage - 1] : null;
    return (
      <SafeAreaView style={styles.container}>
        {isWizard && wizardPages.length > 1 && (
          <Card style={styles.pagination}>
            <RadioPagination
              numberOfPages={wizardPages}
              currentPage={currentWizardPage}
            />
          </Card>
        )}
        <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          extraScrollHeight={45}
          innerRef={ref => {
            this.scroll = ref;
          }}
          enableOnAndroid={true}
          contentContainerStyle={{ paddingBottom: 90 }}
        >
          <View style={styles.headerContainer}>
            <Text style={styles.ballotTitle}>{selectedSurvey.Name}</Text>
            <Text style={styles.ballotSubtitle}>
              {selectedSurvey.Description}
            </Text>
          </View>
          {isList &&

我试图解决的方法是在automaticallyAdjustContentInsets={false}内添加KeyboardAwareScrollView，没有解决该错误。有任何想法吗？

Answer 1

我不确定是什么原因为您造成的，但是以下几项内容已更正了我过去遇到的类似问题：

它可以帮助将每个屏幕用flex：1包装在一个容器中。
我有一个类似的案例，有条件地在FlatList上方显示搜索栏，并用它来解决它：

我将此添加到了文件的顶部。

import { Dimensions, other stuff you need} from 'react-native';

const deviceHieght = Dimensions.get('window').height;

然后我将FlatList包裹在这样的视图中

<View style={this.state.showBar === false ? styles.containFlatlist : styles.containSearchFlatlist}>

这是它所引用的样式

containFlatlist: {
  height: deviceHieght
},
containSearchFlatlist: {
  height: deviceHieght-100
},

在另一个类似的情况下，我遇到了这样的问题，即在滚动视图中单击显示照片的屏幕。在那种情况下，我这样做了：
```
          <ScrollView
          ref={component => this._scrollInput = component}
          >
```

然后在我放入的componentDidMount中

setTimeout(() => {
this._scrollInput.scrollTo({ x: 0, animated: false })
}, 100)

在这种情况下，我也使用了反应导航，所以我也这样做了

                return(<View style={styles.mainFlex}>
              <NavigationEvents
          onWillBlur={payload => this._scrollInput.scrollTo({x:0})}
        />

接下来是我的其余代码。

我希望其中之一能有所帮助。考虑到您也在处理滚动视图，我的最佳猜测是，第三种解决方案最有可能在您的情况下起作用。

Answer 2

因此，此代码段出现在这里：

componentDidUpdate(prevProps) {
    if (prevProps.currentWizardPage !== this.props.currentWizardPage) {
      this.scroll.props.scrollToPosition(0, 0, true);
    }
  }

尤其是this.scroll.props.scrollToPosition(0, 0, true);。在删除整个组件生命周期方法时，该错误消失了。

React Native：屏幕上方有多余的空白空间

2 个答案: