Question

你好社区，我试图徒然在我的“个人资料”屏幕中应用滚动视图！当我添加ScrollView Tag时，每个组件都在上半屏中被压缩！但是，这就是添加标签后的样子，如果能获得帮助，我将非常感激

PS：只是在添加滚动视图标记之前发出通知，我正在键入代码并实现视图..到那时，超出的视图被屏幕的全局框架所掩盖我想达到我的下方视图，但我向下滚动，但它歪斜了，下方视图并没有向上移动！我必须以不影响“包含拖车钱包的白色视图”的方式进行滚动;我滚动所有灰色视图视图应该在白色的背面传递（不考虑白色视图）

这是我的代码： ProfilScreen.js

 
        <View style={{flex:1}}>



          <View style={{backgroundColor:'blue', height:"30%", width:"100%"}}>
            <TouchableOpacity>
              <Icon size={30} style={{marginTop:10,marginLeft:10,color:'#ffffff'}} name={'arrowleft'}
                    onPress={() => {this.props.navigation.goBack()}}  />
            </TouchableOpacity>

            <View style={{width:100 , height:100 ,backgroundColor:"red",alignSelf:"center",borderRadius:50,top:-20}}>

            </View>
          </View>


          <View style={{elevation:1,backgroundColor:"white",height:"18%",width:"90%",borderRadius:20,top:"22%",
            marginLeft:"5%",alignItems:'center',flexDirection:'row',shadowOpacity:1,shadowRadius:30,position:"absolute",zIndex:1}}>


            <View style={{flex:1,alignItems:'center',flexDirection:'row'}}>
              <Image style={{marginRight:10,marginLeft:15,marginBottom:10}} source={require("../assets/fonts/WalletOpened.png")}></Image>
              <View style={{flexDirection:'column'}}>
                <Text>8000 MAD</Text>
                <Text>Total à recevoir</Text>
              </View>
            </View>

            <View style={{flex:1,alignItems:'center',borderRigthWidth:1,borderLeftWidth:1,flexDirection:'row'}}>
              <Image style={{marginRight:10,marginLeft:20}} source={require("../assets/fonts/wallet.png")}></Image>
              <View style={{flexDirection:'column'}}>
                <Text>2500 MAD</Text>
                <Text>Total à payer</Text>
              </View>
            </View>

          </View>


          <View style={{flex:1}}>
            <ScrollView  showsVerticalScrollIndicator={false}>

          <View  style={{ height:"30%", width:"100%",marginTop:"20%"}}>
            <ScrollView horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        contentContainerStyle={{flexDirection:"row"}}>

              <View style={{marginLeft:10,flex:1}}>
                <View style={{borderRadius:20,height:'98%',width:100,marginRight:20,elevation:1}}>

                </View>
                <View style={{width:30,height:30,borderRadius:50,backgroundColor:'blue',position:"absolute",top:20,left:80,elevation:1}}>

                </View>
              </View>

              <View style={{marginLeft:10,flex:1}}>
                <View style={{borderRadius:20,height:'98%',width:100,marginRight:20,elevation:1}}>

                </View>
                <View style={{width:30,height:30,borderRadius:50,backgroundColor:'blue',position:"absolute",top:20,left:80,elevation:1}}>

                </View>
              </View>

            </ScrollView>
          </View>

              <View style={{height:150, width:"90%",marginTop:10,marginLeft:"5%",
                borderRadius:20,elevation:1,marginBottom:10}}>

                <View style={{flex:1,flexDirection:'row',justifyContent:"space-between",alignItems:"center"}}>
                  <Text style={{marginLeft:40}}>{this.state.switchValue?'Alert de paiement':'Alert de paiement'}</Text>
                  <Switch style={{marginRight:20}}
                          onValueChange = {this.toggleSwitch}
                          value = {this.state.switchValue}
                  />
                </View>

                <View style={{backgroundColor:"gray" ,width:"80%",height:1,marginLeft:"10%"}}></View>

                <View style={{flex:1,flexDirection:'row',justifyContent:"space-between",alignItems:"center"}}>
                  <Text style={{marginLeft:40}}>{this.state.switchValue1?'Alert de blocage/déblocage':'Alert de blocage/déblocage'}</Text>
                  <Switch style={{marginRight:20}}
                          onValueChange = {this.toggleSwitch1}
                          value = {this.state.switchValue1}
                  />
                </View>
              
              </View>

              <View style={{height:150, width:"90%",marginTop:10,marginLeft:"5%",
                borderRadius:20,elevation:1,marginBottom:10}}>

                <View style={{felxDirection:'column', flexDirection: "row",justifyContent: "space-between",alignItems: "center"}}>
                  <Text style={{ fontWeight:'bold'}}> Mes informations</Text>
                  <Image source={Logo} />
                </View>

                <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                  <View style={{flexDirection:'column'}}>
                    <Text>CIN</Text>
                    <Text>hiden</Text>
                  </View >

                  <View style={{flexDirection:'column'}}>
                    <Text>NOM</Text>
                    <Text>hiden</Text>
                  </View>
                </View>


                <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                  <View style={{flexDirection:'column'}}>
                    <Text>PRENOM</Text>
                    <Text>hiden</Text>
                  </View>

                  <View style={{flexDirection:'column'}}>
                    <Text>TELEPHONE</Text>
                    <Text>hiden</Text>
                  </View>

                </View>

                <View style={{flexDirection:'row'}}>
                  <View style={{flexDirection:'column'}}>
                    <Text>EMAIL</Text>
                    <Text>hiden@mail.com</Text>
                  </View>
                </View>

                <View style={{flexDirection:'column',justifyContent:'space-between'}}>
                <Text> Chnger mon mot de passe</Text>
                <Image source={Logo1}/>
                </View>

              </View>


            </ScrollView>
          </View>


        </View>

    );
  }
}

ScrollView不会影响界面

0 个答案: