我一直在尝试创建一个可滚动的屏幕每件事看起来很好，但屏幕不滚动的一些原因，我不知道是什么问题，这是我第一次与react原生和所有不同的组件都困扰我.这是我的代码，我将删除一些额外的代码，如导入，逻辑和获取请求，因为它太长：
import React, { useEffect, useState } from 'react'
import {
View,
ScrollView,
Image,
Text,
StyleSheet,
TouchableOpacity,
FlatList,
Dimensions,
SafeAreaView} from 'react-native'
let {width} = Dimensions.get('window');
let {height} = Dimensions.get('window');
const PriceComparison = ( { route, navigation: { goBack } } ) => {
const {onAdd} = useStateContext();
const {itemId, itemName, itemStore, itemCategory} = route.params;
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const screenHeight = Dimensions.get('window').height
return (
<SafeAreaView style={
{
flex: 1,
}
}>
{isLoading ? (
<ScrollView contentContainerStyle={{ flexGrow: 1, width: width, height: height}} keyboardShouldPersistTaps='handled'>
<Text>Loading....</Text>
</ScrollView>
) : (
<View style={{height: screenHeight, backgroundColor: '#fff'}}>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{height: '100%'}}>
<View style={styles.Header}>
<TouchableOpacity
style={styles.button}
onPress={() => goBack()}
>
<Icon icon ='arrow-back-outline' color='#000'/>
</TouchableOpacity>
<Text style={{fontWeight: '800', fontSize: 20}}>Price Comparison</Text>
</View >
{ (dataLength !== 0) ?
<View style={{height: '100%'}}>
{data?.sort((a,b) => {return a.price-b.price}).slice(0, 1).map((product) => (
<View style={{height: '50%'}}>
<View style={{height: '100%'}}>
{dummyData.storesData.filter((img) => img.store === product.store ).map((img) => (
<View style={styles.Cheapest}>
<View style={styles.CheapestLogo}>
<Image
style={styles.CheapestLogoImage}
source={{ uri: `${img.shopbyimg}` }}
/>
</View>
<View style={styles.CheapestDetails}>
<Image
style={styles.ProductImage}
source={{ uri: `${product.image}` }}
/>
<View style={styles.CheapestTitle}>
<View style={{width: '70%'}}>
<Text style={styles.CheapestName}> {product.name} <Text style={styles.CheapestMeasurement}> {product.measurement} </Text></Text>
</View>
<Text style={styles.CheapestPrice}> ${product.price}</Text>
</View>
<View style={styles.CheapestSavings}>
<Text style={styles.SavePrice}> Save: ${saving} </Text>
<Text style={styles.SavePercentage}> Save up to {percentageSaving}% </Text>
</View>
<TouchableOpacity
style={{backgroundColor: COLORS.primary, padding: 15, borderRadius: 4, width: '92%', marginTop: 10, marginLeft: 'auto', marginRight: 'auto'}}
onPress={() => {onAdd(product, qty)}}
>
<Text
style={{
color: '#fff',
fontWeight: '600',
textAlign: 'center'
}}>
ADD TO CART
</Text>
</TouchableOpacity>
</View>
</View>
))}
</View>
</View>
))}
{data?.sort((a,b) => {return a.price-b.price}).slice(1, data.length).map((product) => (
<View
style={{
height: '50%',
marginTop: 80,
backgroundColor: 'transparent',
marginTop: 100,
width: '92%',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: 8
}}>
{dummyData.storesData.filter((img) => img.store === product.store ).map((img) => (
<View style={styles.otherProducts}>
<View style={styles.otherProductsImage}>
<Image
style={styles.otherImages}
source={{ uri: `${product.image}` }}
/>
</View>
<View style={styles.otherProductsDetails}>
<Image
style={styles.otherImagesLogo}
source={{ uri: `${img.image}` }}
/>
<View>
<Text style={styles.CheapestName}> {product.name}</Text>
<Text style={styles.CheapestMeasurement}> {product.measurement} </Text>
</View>
<Text style={styles.CheapestPrice}> ${product.price}</Text>
<TouchableOpacity
style={{backgroundColor: COLORS.primary, padding: 10, borderRadius: 4, width: '92%', marginTop: 10,}}
onPress={() => {onAdd(product, qty)}}
>
<Text
style={{
color: '#fff',
fontWeight: '600',
textAlign: 'center'
}}>
ADD TO CART
</Text>
</TouchableOpacity>
</View>
</View>
))}
</View>
))}
</View>
: <><Text> No other product available for price comparison </Text>
<Text onPress={() => goBack()}> Return to the previous page </Text></> }
</View>
<BottomTabs/>
</ScrollView>
</View>
)}
</SafeAreaView>
)
}
export default PriceComparison
const Icon = (props) => (
<View>
<Ionicons
name={props.icon}
size={25}
style={{
marginBottom: 3,
alignSelf: 'center'
}}
color={props.color}
/>
</View>
)
const styles = StyleSheet.create({
scroller: {
flex: 1,
flexDirection: 'column'
},
Header: {
marginTop: 40,
flexDirection: 'row',
marginHorizontal: 5,
justifyContent: 'space-between',
marginLeft: 20,
marginRight: 20
},
Cheapest: {
height: '40%',
},
CheapestLogoImage: {
width: '50%',
height: '50%',
marginLeft: 'auto',
marginRight: 'auto',
marginTop: 10
},
CheapestDetails: {
marginTop: 5,
height: '100%'
},
ProductImage: {
width: '80%',
height: '80%',
marginLeft: 'auto',
marginRight: 'auto',
resizeMode: "contain"
},
CheapestDetails: {
width: '100%',
},
CheapestTitle: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 20,
marginLeft: 10,
marginRight: 10
},
CheapestName: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19
},
CheapestMeasurement: {
fontSize: 14,
fontWeight: '500',
lineHeight: 19,
color: COLORS.darkGray2
},
CheapestPrice: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19
},
CheapestSavings: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginLeft: 10,
marginTop: 5,
marginBottom: 5,
marginRight: 10
},
SavePrice: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19,
color: COLORS.primary
},
SavePercentage: {
fontSize: 14,
fontWeight: '600',
lineHeight: 19,
color: COLORS.Tomato
},
otherProducts: {
flexDirection: 'row',
},
otherImages: {
width: 120,
height: 120,
resizeMode: "contain",
},
otherProductsDetails: {
marginTop: 20,
width: '65%',
},
otherImagesLogo: {
height: '20%',
width: 120,
marginBottom: 10,
borderRadius: 6
}
});
1条答案
按热度按时间kqhtkvqz1#
删除外部视图。将
style={{ flex: 1 }}添加到ScrollView。说明：可以将ScrollViews看作两个级别-外部视图和内部视图。内部视图的样式为
contentContainerStyle。外部视图的样式为style。外部视图需要flex: 1来分配空间。