如何在本机中使用滚动视图

问题描述 投票:0回答:1

我正在尝试为客户创建购物应用,并且我想将滚动属性添加到应用的购物车页面,因此我使用了

`scrollview`

属性,我立即添加了scrollview并重新加载了所有分散的应用程序。

这里是没有scrollveiw的原始页面

enter image description here

这是带有scrollview的页面

enter image description here

我经过研究后通过将contentContainerStyle={{flex:1}}添加到scrollview来解决此问题,此后我在页面上添加了更多内容,但没有滚动,我不知道为什么,也许我可能正在做某事错误的是此页的代码

 <ScrollView contentContainerStyle={{flex:1}}>
    <View style={styles.page}>
       <Cartheader gotocart={gotocart} gotohome={gotohome} />
       <View style={{justifyContent:'space-between', alignItems:'center'}}>
       <View style = {styles.up}>

        <TouchableOpacity style={styles.back} onPress={gtoback}>
            <Image style={styles.arrowb} source={require('../resources/arrowback.png')} />
        </TouchableOpacity>

        <View style={styles.overall}>
            <View style = {styles.title}><Text style={{fontSize:RFPercentage(5),fontWeight:'bold',marginLeft: '4%',}}>Cart</Text></View>

            <View style = {styles.cartitems}>
                <View style ={styles.details}>
                    <View style={styles.details1}><Text style={{fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Item</Text></View>
                    <View style={styles.details2}><Text style={{fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Quantity</Text></View>
                    <View style={styles.details3}><Text style={{fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Item Total</Text></View>
                    <View style={styles.details4}><Text style={{fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Remove</Text></View>
                </View>
                <View style ={styles.real}>
                <View style={styles.real1}>
                <Image style={styles.dem} source={require('../resources/comfortable-seats-in-empty-corporate-meeting-office-for-presentation-JCC1N0.jpg')} />
                <View style={styles.descrip}>
                    <View><Text style={{fontWeight:'bold',fontSize:RFPercentage(2.5)}}>A/c Chairs</Text></View>
                    <View><Text style={{fontSize:RFPercentage(1.25), color:'#40b9e9'}}>N 400.00 NGN</Text></View>
                </View>
                </View>
                <View style={styles.real2}>
                    <View style={{width:'50%',height:'60%',justifyContent:'space-around',alignItems:'center'}}><Text style = {{fontSize:RFPercentage(2.5)}}>2</Text></View>
                    <View style={{width:'50%',height:'60%',justifyContent:'space-between'}}>
                    <TouchableOpacity>
            <Image style={styles.arrowc} source={require('../resources/arrowback.png')} />
        </TouchableOpacity>

        <TouchableOpacity  >
            <Image style={styles.arrowd} source={require('../resources/arrowback.png')} />
        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.real3}><Text style={{color:'#40b9e9',fontSize:RFPercentage(1.5)}}>N 800.00 NGN</Text></View>
                <View style={styles.real4}>
                    <TouchableOpacity style={styles.x}>
                        <Text style={{color:'#fff',fontSize:RFPercentage(2.5),marginTop:-2}}>x</Text>
                    </TouchableOpacity>
                </View>
                </View>
            </View>
            {/* ///////////////////////////////////// */}
            <View style={styles.payment}>
                <View style={{justifyContent:'space-around',height:'100%',width:'57%'}}>
                    <View style={styles.pay}><Image style={styles.radio} source={require('../resources/radio.png')} />
                    <Text style={{marginLeft:5,fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Pay On Delivery</Text></View>
                    <View style={styles.pay}><Image style={styles.radio} source={require('../resources/radio.png')} />
                    <Text style={{marginLeft:5,fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Paystack(subscription)</Text></View>
                    <View style={styles.pay}><Image style={styles.radio} source={require('../resources/radio.png')} />
                    <Text style={{marginLeft:5,fontWeight:'bold',fontSize:RFPercentage(1.8)}}>Qucikteller(Master Card/Verve)</Text></View>
                </View>
                <View style={{justifyContent:'space-around',height:'100%',width:'41%'}}>
                    <View style = {styles.total}><Text style={styles.bold}>Sub Total:   </Text><Text style={{color:'#40b9e9',fontSize:RFPercentage(1.8)}}>N 7400.00</Text></View>
                    <View style = {styles.total}><Text style={styles.bold}>Shipping:   </Text><Text style={{color:'#40b9e9',fontSize:RFPercentage(1.8)}}>N 0.00</Text></View>
                    <View style = {styles.total}><Text style={styles.bold}>Garnd Total:   </Text><Text style={{color:'#40b9e9',fontSize:RFPercentage(1.8)}}>N 7400.00</Text></View>

                </View>
            </View>
            <View style={styles.terms}>
            <Image style={styles.checkbox} source={require('../resources/check.png')} />
            <Text style= {{fontSize:RFPercentage(1.8)}}>I Have Read And i Agree To The Terms & Conditions</Text>
            </View>
            <View style={styles.buttons}>
                <TouchableOpacity style={{width:'70%',height:'40%',backgroundColor:'darkblue',justifyContent:'space-around',alignItems:'center',}}>
                    <Text style={{color:'#fff',textAlign:'center',fontSize:RFPercentage(3.2), fontWeight:'bold'}}>Proceed To Checkout</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{width:'70%',height:'40%',}}>
                    <Text style={{color:'darkblue',textAlign:'center',fontSize:RFPercentage(3.2), fontWeight:'bold'}} onPress={gotohome}>Back To Shop</Text>
                </TouchableOpacity>
            </View>
            <View style={{width:'30%',backgroundColor:'red'}}></View>
        </View>

       </View>
       </View>
    </View></ScrollView>

提前感谢!

javascript reactjs react-native scrollview react-native-android
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.