反应原生 Scrollview 根本不滚动

Question

我正在构建一个 react native 应用程序，我对某些内容使用滚动视图，但它没有滚动，我不知道为什么。 我尝试了很多东西，到处添加flex: 1，但这些都不起作用。

提前感谢您的帮助。

<KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
          <Layout isBackArrow={true}>
              <BottomLayout>
                  <Header fontSize={20}>
                      <Text>Nous sommes</Text> {'\n'}
                      <Text style={authStyles.headerBold}>
                          Ravis de te revoir!
                      </Text>
                      {'\n'}
                      <Caption>Je me connecte via:</Caption>
                  </Header>
                  <View style={authStyles.socialIconView}>
                      <SocialIcon type="facebook" onPress={onFacebookLogin} />
                      <SocialIcon type="google" />
                      <SocialIcon
                          type="apple"
                          onPress={onAppleButtonPress}
                          style={{ backgroundColor: COLORS.BLACK }}
                      />
                  </View>
                  <View style={authStyles.orView}>
                      <Header fontSize={15}>
                          <Text style={authStyles.headerBold}>Ou</Text>
                          {'\n'}
                          <Caption>
                              Je saisis mon email et mot de passe
                          </Caption>
                      </Header>
                  </View>
                  <View style={authStyles.inputView}>
                      <CustomInput
                          label="Email"
                          icon
                          iconName="envelope"
                          iconFamily="font-awesome"
                          onChange={text => setEmail(text)}
                      />
                      <CustomInput
                          label="Mot de passe"
                          icon
                          iconName="lock"
                          iconFamily="entypo"
                          onChange={text => setPassword(text)}
                          password
                      />
                      <CustomButton
                          title="Mot de passe oublié ?"
                          clear
                          onPress={open}
                      />
                  </View>
              </BottomLayout>
          </Layout>
      </KeyboardAwareScrollView>

布局组件：

<View style={layoutStyles.background}>
            {isBackArrow && <BackArrow onPress={onBackArrowPress} />}
            <ScrollView
                style={{ flex: 1 }}
                contentContainerStyle={{
                    flex: 1,
                }}
            >
                {children}
            </ScrollView>
        </View>

布局风格：

background: {
        backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
        width: '100%',
        height: '100%',
        flex: 1,
    },

底部布局组件：

<View style={layoutStyles.bottomLayout}>{children}</View>;

底部布局样式：

bottomLayout: {
        backgroundColor: COLORS.BRAND_ORANGE,
        position: 'absolute',
        bottom: 0,
        height: '75%',
        width: '100%',
        borderTopLeftRadius: 70,
        borderTopRightRadius: 70,
        paddingTop: 60,
        flex: 1,
    },

keyboardAwareScrollView contentContainerStyle:

container: {
       justifyContent: 'center',
       alignItems: 'center',
       flex: 1,
   },

提前致谢。

Answer 1

KeyboardAwareScrollView 已经为您提供了一个 ScrollView，您无需在其中添加另一个。 从 Layout 中移除 ScrollView 或移除 KeyboardAwareScrollView。

React Native Nested ScrollView Can`t Scroll on Android Device

也不要在contentContainerStyle 中使用flex: 1，如果您希望它是全屏的，即使其中没​​有足够的内容，也要使用minHeight: '100%' (why?)。