如何在 React Native 中使用滚动视图

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。

如何在 React Native 中使用滚动视图

how to use scroll view in react native

javascript

scrollview

reactjs

react-native

react-native-android