反应本机滚动视图组件不滚动

Question

当内容的高度超过屏幕的高度时，我使用滚动视图执行垂直滚动，但滚动通过在网络上垂直最小化屏幕来保持显示和隐藏（它在晃动），当我停止最小化屏幕时，它永远不会显示或卷轴 我试图杀死应用程序并重新启动地铁，但它不起作用

SignUpScreen.tsx

...
return (
    <View style={[styles.mobileContainer,styles.mobileScreen,]} > //flex:1
      <ScrollView contentContainerStyle={{flex:1}} //flex:1
        style={GlobalStyle.formContainer}
        >
        <View >  //wrapper of the whole content
          <View style={styles.signupImage}>
            <Image source={images.Signup} style={styles.image} />
          </View>
          <Title title={'sign up'} style={{marginBottom:SIZES.xLarge}} />  
          
          <View style={styles.inputContainer}>
            <Controller
              name="fullName"
              control={control}
              render={({ field: { onChange, onBlur, value, ref } }) =>  
                <PaperInput
                  readOnly={false}
                  returnKeyType={"next"}
                  isValid={value===''?false:errors.fullName?false:true}
                  rightIcon={value!==undefined&&errors.fullName===null
                    ?<True width={SIZES.medium} height={SIZES.medium} />
                    : undefined}
                  leftIcon={<Name color={COLORS.gray} width={SIZES.medium} height={SIZES.medium} 
                   />}
                  //style={styles.form_input}
                  placeholder={'full name'}
                  onChangeText={(value: any) => onChange(value) }
                  value={value}
                  
                />

              }
            />
            <ErrorMessage errors={errors} name={'fullName'}  render={({ message }) => 
                <Error message={message} />} />
          </View>
          //....rest of my controlled input 

          <View style={styles.inputContainer}>
            {<PrimaryButton value={signupButtonText} 
                disabled ={false} onPress={handleSubmit(onSubmit)}
                icon={signupButtonText=== 'signing up...'
                ?<ActivityIndicator size={SIZES.medium} color={COLORS.white}
                  style={{ marginRight:SIZES.medium}} />
                :undefined
                }
            />}
          </View>
          <View style={styles.navigate}>
            <Text style={TextStyle.navigateText}></Text>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default SignUpScreen

样式.ts

export const styles = StyleSheet.create({

 mobileContainer: { 
      flex:1,
      //height:'100%',
      flexWrap: 'nowrap',
      paddingVertical:SIZES.xSmall,
      paddingHorizontal:SIZES.medium,
      backgroundColor: COLORS.white,
      justifyContent:'flex-start',
      alignItems:'center',
      },

 formContainer:{
        flex:1,
        width:'90%',
        maxWidth:300,
},
inputContainer:{
   flex:1,
   marginBottom:SIZES.large ,
  },
signupImage:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    marginBottom:42,
  //  marginTop:SIZES.large

  },
  image:{
     width:250,
     height:160,
     
  },
    })

Answer 1

我想通了，只需将 maxHeight 设置为父视图的屏幕高度即可：

maxHeight:Dimensions.height