我正在尝试在显示一系列产品的主屏幕中添加 ScrollView 。当我在屏幕上添加 SCROLLVIEW 时，它不会启用滚动功能。我制作了一个 View ，其中正在呈现一个组件，每个组件都有自己的数组。
代码
Newsfeed.js
import React, {Component} from 'react';
import {View, Text, TouchableOpacity,StyleSheet} from 'react-native';
import Connections from './Components/Connections';
import ClearStock from './Components/ClearStock';
import NewProducts from './Components/NewProducts';
import Discounts from './Components/Discounts';
import CustomButton from './Components/CustomButton';
import { ScrollView } from 'react-native';
// import {ScrollView} from 'react-native';
export default class NewsFeed extends Component {
state = {
selected: 'ClearStock',
};
buttonClick(name) {
this.setState({selected: name});
}
render() {
return (
<View>
<View style={{flexDirection: 'row',borderWidth:5,backgroundColor:'#ffc687'}}>
<CustomButton
style={styles.btnStyle}
onPress={() => this.buttonClick('ClearStock')}
iconName="stumbleupon-circle">
Clear Stock
</CustomButton>
<CustomButton
style={styles.btnStyle}
onPress={() => this.buttonClick('Discounts')}
iconName="home" >
Discounts
</CustomButton>
<CustomButton
style={styles.btnStyle}
onPress={() => this.buttonClick('NewProducts')}
iconName="free-code-camp">
New Products
</CustomButton>
<CustomButton
style={styles.btnStyle}
onPress={() => this.buttonClick('Connections')}
iconName="home">
Connections
</CustomButton>
</View>
<View>
{this.state.selected === 'ClearStock' ? (
<ClearStock />
) : this.state.selected === 'Discounts' ? (
<Discounts />
) : this.state.selected === 'NewProducts' ? (
<NewProducts />
) : (
<Connections />
)}
</View>
</View>
);
}
}
styles=StyleSheet.create({
btnStyle:{
marginLeft:40,
// backgroundColor:'red',
borderRadius:10,
}
});
CustomCard.js
import React, { Component } from 'react';
import {ImageBackground, View, TouchableOpacity, StyleSheet, Image, Text, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
export default class CustomCard extends Component {
state = {
product: [
{
name: "Mug",
quantity: 2,
price: 199,
category: "Kitchen ware",
tags: ["mug", "kitchen", "utensils"],
color: "White",
imageUrl: "https://images-na.ssl-images-amazon.com/images/I/61KB6fUhcSL._SL1500_.jpg"
},
{
name: "Samsung A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://johnlewis.scene7.com/is/image/JohnLewis/238087827?$rsp-pdp-port-1440$"
},
{
name: "Nokia A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://assets.mspimages.in/wp-content/uploads/2019/03/Nokia-X71-696x435.jpg"
},
{
name: "QMobile A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://www.whatmobile.com.pk/admin/images/Qmobile/NoirJ5b.jpg"
},
]
}
render() {
const { name, quantity, price, category, tags, color, imageUrl } = this.props.products;
return (
<View >
<ImageBackground
style={styles.productView}
source={{ uri: "https://www.akfoconee.com/wp-content/uploads/2017/12/kids-martial-arts-landing-page-section-two-background-min-min.png" }}
>
<View style={{ flexDirection: 'row' }}>
<Icon name="bullhorn" size={30} />
<View style={{ marginLeft: 30, padding: 10, height: "100%", borderRadius: 30, borderWidth: 1, borderColor: "orange", width: "30%" }}>
<Image style={{ marginLeft: 10, height: "100%", width: 100, resizeMode: "contain" }} source={{ uri: imageUrl }} />
</View>
<View style={{ padding: 1, marginLeft: 10 }}>
<Text> We are offering FLASH SALE</Text>
<Text style={styles.itemDescription}>{name}</Text>
<Text style={styles.itemDescription}>{quantity}</Text>
<Text style={styles.itemDescription}> original price RS {price}</Text>
<Text style={styles.itemDescription}> price for 100 products RS {price}</Text>
</View>
</View>
</ImageBackground>
</View>
)
}
}
const styles = StyleSheet.create({
itemDescription: {
fontSize: 15,
color: "black",
},
productView: {
// borderRadius:30,
// backgroundColor:"red",
elevation: 2,
paddingTop: 15,
paddingBottom: 15,
paddingLeft: 15,
paddingRight: 15,
height: 150,
width: "100%",
marginLeft: 15,
// marginRight: 20,
marginTop: 10,
// borderWidth: 0.14,
// borderRadius:10
// marginBottom:50,
// borderColor:"black"
}
})
ClearStock.js
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import CustomCard from './CustomCard';
import { ScrollView } from 'react-native';
export default class ClearStock extends Component {
state = {
product: [
{
name: "Mug",
quantity: 2,
price: 199,
category: "Kitchen ware",
tags: ["mug", "kitchen", "utensils"],
color: "White",
imageUrl: "https://images-na.ssl-images-amazon.com/images/I/61KB6fUhcSL._SL1500_.jpg"
},
{
name: "Samsung A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://johnlewis.scene7.com/is/image/JohnLewis/238087827?$rsp-pdp-port-1440$"
},
{
name: "Nokia A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://assets.mspimages.in/wp-content/uploads/2019/03/Nokia-X71-696x435.jpg"
},
{
name: "QMobile A50",
quantity: 6,
price: 15000,
category: "Mobile Phone",
tags: ["mug", "kitchen", "phone"],
color: "Black",
imageUrl: "https://www.whatmobile.com.pk/admin/images/Qmobile/NoirJ5b.jpg"
},
]
}
render() {
return (
<View>
<Text>About Clearing Stock</Text>
{
this.state.product.map((data,index) => {
return(
<CustomCard products={data} key={index}></CustomCard>
// <Text>Hello</Text>
)
})
}
</View>
);
}
}
最佳答案
您的应用程序存在弹性问题
<View style={{width:"100%",flex:1}}>
<Text>About Clearing Stock</Text>
{
this.state.product.map((data,index) => {
return(
<CustomCard products={data} key={index}></CustomCard>
// <Text>Hello</Text>
)
})
}
</View>
关于javascript - 如何在组件内的组件中启用 ScrollView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58978883/