我正在构建一个react原生应用程序,我使用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,
},
型
BottomLayout组件:
<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,
},
型
的数据
先谢了。
2条答案
按热度按时间dfuffjeb1#
KeyboardAwareScrollView已经提供了一个ScrollView,您不需要在其中添加另一个。从布局中删除ScrollView或删除KeyboardAwareScrollView。
[React Native Nested ScrollView Can
t Scroll on Android Device](https://stackoverflow.com/questions/37455701/react-native-nested-scrollview-cant-scroll-on-android-device) 也不要在
contentContainerStyle中使用
flex: 1,如果你想让它全屏显示,即使里面没有足够的内容,也可以使用
minHeight: '100%'`(why?)。fslejnso2#
在某些情况下,将宽度或高度设置为%将解决此问题