反應原生滾動視圖根本不滾動

Question

我正在構建一個 react native 應用程序，我對某些內容使用了 scrollview，但它沒有滾動，我不知道為什么。 我嘗試了很多東西，到處添加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 無法在 Android 設備上滾動

也不要在contentContainerStyle使用flex: 1 ，而是使用minHeight: '100%' （為什么？ ），如果您希望它全屏顯示，即使其中沒​​有足夠的內容。