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

Question

我正在尝试为客户创建一个购物应用程序，我想将滚动属性添加到应用程序的购物车页面，所以我使用了

`scrollview`

属性，我立即添加了scrollview 并重新加载了应用程序，一切都分散了。

这里是没有scrollveiw的原始页面

这是带有scrollview的页面

经过一些研究，我通过将这个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>

提前谢谢！！！

Answer 1

尝试复制他们在文档中所做的事情：scrollView Doc

这是他们小吃的代码：

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

您应该注意的一点是他们在style 属性中使用flex:1，而不是contentContainerStyle。