android React native Scrollview根本不滚动

mbskvtky  于 2024-01-04  发布在  Android
关注(0)|答案(2)|浏览(170)

我正在构建一个react原生应用程序,我使用scrollview来处理一些内容,但它不能滚动,我不知道为什么。我尝试了很多东西,在所有地方添加flex: 1,但没有一个工作。
提前感谢您的帮助。

  1. <KeyboardAwareScrollView contentContainerStyle={authStyles.container}>
  2. <Layout isBackArrow={true}>
  3. <BottomLayout>
  4. <Header fontSize={20}>
  5. <Text>Nous sommes</Text> {'\n'}
  6. <Text style={authStyles.headerBold}>
  7. Ravis de te revoir!
  8. </Text>
  9. {'\n'}
  10. <Caption>Je me connecte via:</Caption>
  11. </Header>
  12. <View style={authStyles.socialIconView}>
  13. <SocialIcon type="facebook" onPress={onFacebookLogin} />
  14. <SocialIcon type="google" />
  15. <SocialIcon
  16. type="apple"
  17. onPress={onAppleButtonPress}
  18. style={{ backgroundColor: COLORS.BLACK }}
  19. />
  20. </View>
  21. <View style={authStyles.orView}>
  22. <Header fontSize={15}>
  23. <Text style={authStyles.headerBold}>Ou</Text>
  24. {'\n'}
  25. <Caption>
  26. Je saisis mon email et mot de passe
  27. </Caption>
  28. </Header>
  29. </View>
  30. <View style={authStyles.inputView}>
  31. <CustomInput
  32. label="Email"
  33. icon
  34. iconName="envelope"
  35. iconFamily="font-awesome"
  36. onChange={text => setEmail(text)}
  37. />
  38. <CustomInput
  39. label="Mot de passe"
  40. icon
  41. iconName="lock"
  42. iconFamily="entypo"
  43. onChange={text => setPassword(text)}
  44. password
  45. />
  46. <CustomButton
  47. title="Mot de passe oublié ?"
  48. clear
  49. onPress={open}
  50. />
  51. </View>
  52. </BottomLayout>
  53. </Layout>
  54. </KeyboardAwareScrollView>

字符串
布局组件:

  1. <View style={layoutStyles.background}>
  2. {isBackArrow && <BackArrow onPress={onBackArrowPress} />}
  3. <ScrollView
  4. style={{ flex: 1 }}
  5. contentContainerStyle={{
  6. flex: 1,
  7. }}
  8. >
  9. {children}
  10. </ScrollView>
  11. </View>


布局样式:

  1. background: {
  2. backgroundColor: COLORS.BRAND_ORANGE_OPACITY_2,
  3. width: '100%',
  4. height: '100%',
  5. flex: 1,
  6. },


BottomLayout组件:

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


底部布局样式:

  1. bottomLayout: {
  2. backgroundColor: COLORS.BRAND_ORANGE,
  3. position: 'absolute',
  4. bottom: 0,
  5. height: '75%',
  6. width: '100%',
  7. borderTopLeftRadius: 70,
  8. borderTopRightRadius: 70,
  9. paddingTop: 60,
  10. flex: 1,
  11. },


keyboardAwareScrollView contentContainerStyle:

  1. container: {
  2. justifyContent: 'center',
  3. alignItems: 'center',
  4. flex: 1,
  5. },


的数据
先谢了。

dfuffjeb

dfuffjeb1#

KeyboardAwareScrollView已经提供了一个ScrollView,您不需要在其中添加另一个。从布局中删除ScrollView或删除KeyboardAwareScrollView。
[React Native Nested ScrollView Cant Scroll on Android Device](https://stackoverflow.com/questions/37455701/react-native-nested-scrollview-cant-scroll-on-android-device) 也不要在contentContainerStyle中使用flex: 1,如果你想让它全屏显示,即使里面没有足够的内容,也可以使用minHeight: '100%'`(why?)。

fslejnso

fslejnso2#

在某些情况下,将宽度或高度设置为%将解决此问题

相关问题