React Native - ScrollView 不滚动答案

【问题标题】：React Native - ScrollView not scrollingReact Native - ScrollView 不滚动
【发布时间】：2022-01-09 01:12:22
【问题描述】：

我目前正在使用 React Native 制作注册表单。当我在应用程序中实现时，滚动条不起作用。

return (
    <TouchableWithoutFeedback
      onPress={() => {
        Keyboard.dismiss();
      }}>
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.formContainer}>
            <View style={styles.registerTextContainer}>
              {/* <Text style={styles.registerText}>Register for an account</Text> */}
            </View>

            <Form type={User} ref={c => (this._form = c)} options={options} />

            <TouchableOpacity
              style={styles.registerButtonContainer}
              onPress={this.handleSubmit}>
              <Text style={styles.registerButtonText}>REGISTER</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </TouchableWithoutFeedback>
  );
}

This is how the application currently looks

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

不要在滚动视图中设置 flex:1，而是尝试

<ScrollView contentContainerStyle={{ flexGrow: 1}}>

【讨论】：

【解决方案2】：

尝试使用 ScrollView 而不是 TouchableWithoutFeedback 包裹整个页面并将 flex 设置为 1

 return (
<ScrollView style={{ flex: 1 }}>
  <TouchableWithoutFeedback
    onPress={() => {
      Keyboard.dismiss();
    }}
  >
    <View style={styles.container}>
      <View style={styles.formContainer}>
        <View style={styles.registerTextContainer}>
          {/* <Text style={styles.registerText}>Register for an account</Text> */}
        </View>

        <Form type={User} ref={(c) => (this._form = c)} options={options} />

        <TouchableOpacity
          style={styles.registerButtonContainer}
          onPress={this.handleSubmit}
        >
          <Text style={styles.registerButtonText}>REGISTER</Text>
        </TouchableOpacity>
      </View>
    </View>
  </TouchableWithoutFeedback>
</ScrollView>

);

【讨论】：

不幸的是没有结果 :( 即使我将 formContainer 设置为 height: 800 应该延伸到页面下方，滑块也没有显示