React Native：轻按FlatList项目时呈现项目详细信息的逻辑
Hello React Native Devs ...我是RN的新手，被困在正在开发的应用程序中的某个位置...在我正在处理的应用程序的一个屏幕中，我需要渲染项目，如下图。
类别在左列中，在点击其中一个类别（例如，汉堡）时，将显示该类别中的项目（在中间列中显示），在点击一个项目（例如，牛肉汉堡）时，在中间列中列将显示该项目的详细信息，这是右列...问题是我无法弄清楚如何在点击时获取类别的项目...我正在使用FlatList ...如果有人想要以下代码，检查。
export default class Menu extends Component {
state = {
categories: [
{
id: 1,
name: 'Burgers',
items: [
{
itemId: 1,
itemName: 'Beef Burger',
itemPrice: 2.89,
isAvailable: false,
addons: [
{
addonId: 1,
addonName: 'Extra Cheese',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Extra Spicy',
addonPrice: 0.89,
isAddonAvailable: false
}
]
},
{
itemId: 2,
itemName: 'Chicken Burger',
itemPrice: 1.89,
isAvailable: true,
addons: [
{
addonId: 1,
addonName: 'Extra Cheese',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Extra Spicy',
addonPrice: 0.89,
isAddonAvailable: false
}
]
}
]
},
{
id: 2,
name: 'Pizza',
items: [
{
itemId: 1,
itemName: 'Pepperoni Pizza',
itemPrice: 2.89,
isAvailable: false,
addons: [
{
addonId: 1,
addonName: 'Extra Cheese',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Extra Spicy',
addonPrice: 0.89,
isAddonAvailable: false
}
]
},
{
itemId: 2,
itemName: 'Cheese Lovers Pizza',
itemPrice: 1.89,
isAvailable: false,
addons: [
{
addonId: 1,
addonName: 'Extra Cheese',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Extra Spicy',
addonPrice: 0.89,
isAddonAvailable: false
}
]
}
]
},
{
id: 3,
name: 'Beverages',
items: [
{
itemId: 1,
itemName: 'Coca Cola',
itemPrice: 2.89,
isAvailable: false,
addons: [
{
addonId: 1,
addonName: 'Chilled',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Normal',
addonPrice: 0.89,
isAddonAvailable: false
}
]
},
{
itemId: 2,
itemName: 'Coffee',
itemPrice: 1.89,
isAvailable: false,
addons: [
{
addonId: 1,
addonName: 'Full Cream',
addonPrice: 0.99,
isAddonAvailable: true
},
{
addonId: 2,
addonName: 'Milk',
addonPrice: 0.89,
isAddonAvailable: false
}
]
}
]
}
],
restCategories: [],
itemListSectionVisible: false,
itemDetailSectionVisible: false,
}
async componentDidMount() {
await this.collectCategories(this.state.categories)
}
collectCategories = async (catArr) => {
cats = []
for (let catID in catArr) {
let catInfo = {}
catInfo['catId'] = catArr[catID]['id'];
catInfo['catName'] = catArr[catID]['name'];
catInfo['catItems'] = this.collectCategoryItems(catArr[catID]['items'])
cats.push(catInfo)
}
this.setState({restCategories: cats})
console.log(this.state.categories)
}
collectCategoryItems = (itemArr) => {
catItems = [];
for (let itemID in itemArr) {
let itemInfo = {};
itemInfo['itemId'] = itemArr[itemID]['itemId'];
itemInfo['itemName'] = itemArr[itemID]['itemName'];
itemInfo['itemPrice'] = itemArr[itemID]['itemPrice'];
catItems.push(itemInfo)
}
return catItems;
}
renderCategoryListItem = (cat) => {
return (
<View style={menuStyles.categoryListItemView}>
<View style={menuStyles.categoryNameView}>
<Text style={menuStyles.categoryNameText}>{cat.catName}</Text>
</View>
<View style={menuStyles.iconView}>
<Icon name='arrow-forward' style={menuStyles.categoryArrow}/>
</View>
</View>
)
}
renderListItem = (item) => {
return (
<View style={menuStyles.itemView}>
<View style={menuStyles.itemThumbView}>
<Image source={itemPlaceHolderThumb} style={menuStyles.itemThumb}/>
</View>
<View style={menuStyles.itemNameView}>
<Text style={menuStyles.itemName}>{item.itemName}</Text>
<Text style={menuStyles.itemPrice}>$ {item.itemPrice}</Text>
</View>
<View style={menuStyles.itemToggleBtnView}>
<Switch
value={item.isAvailable ? true : false}
trackColor={{
false: 'red',
true: 'lime'
}}
ios_backgroundColor='red'
onValueChange={() => console.log('Changed')}
style={menuStyles.itemToggleBtn}
/>
</View>
</View>
)
}
renderAddonList = (addon) => {
return (
<View style={menuStyles.addonListView}>
<View style={menuStyles.addonNameView}>
<Text style={menuStyles.addonNameText}>{addon.addonName}</Text>
</View>
<View style={menuStyles.addonPriceView}>
<Text style={menuStyles.addonPriceText}>+ $ {addon.addonPrice}</Text>
</View>
<View style={menuStyles.addonToggleBtnView}>
<Switch
value={addon.isAddonAvailable ? true : false}
trackColor={{
false: 'red',
true: 'lime'
}}
ios_backgroundColor='red'
onValueChange={() => console.log('Changed')}
style={menuStyles.itemToggleBtn}
/>
</View>
</View>
)
}
showItemListSection = (catIndex) => {
this.setState({
itemListSectionVisible: true,
})
console.log('index ', catIndex)
}
showItemDetailSection = () => {
this.setState({itemDetailSectionVisible: true})
}
render() {
const {itemListSectionVisible, itemDetailSectionVisible} = this.state;
return (
<View style={{flex: 1}}>
<CustomHeader drawerAction={this.props.navigation.openDrawer.bind(this)}/>
<View style={menuStyles.container}>
<View style={menuStyles.categorySection}>
<View style={menuStyles.headingView}>
<Text style={menuStyles.headingText}>{'Menu'.toUpperCase()}</Text>
</View>
<View style={menuStyles.categoryListView}>
<FlatList
data={this.state.restCategories}
keyExtractor={(item, index) => item.catId.toString()}
renderItem={({item, index}) => <TouchableOpacity
onPress={() => this.showItemListSection(item.catId)}>{this.renderCategoryListItem(item)}</TouchableOpacity>}
ItemSeparatorComponent={() => <Hr/>}
/>
</View>
</View>
<View style={menuStyles.itemsSection}>
<View style={menuStyles.headingView}>
<Text style={menuStyles.headingText}>Items</Text>
</View>
<View style={menuStyles.itemListView}>
<FlatList
data={this.state.categories[0].items}
keyExtractor={(item, index) => item.itemId.toString()}
renderItem={({item}) => <TouchableOpacity
onPress={() => this.showItemDetailSection()}>{this.renderListItem(item)}</TouchableOpacity>}
/>
</View>
</View>
<View style={menuStyles.itemDetailSection}>
<View style={menuStyles.itemDetailImageView}>
<Image source={itemPlaceholderImg} style={menuStyles.itemDetailImage}/>
</View>
<View style={menuStyles.itemDetailNameView}>
<Text style={menuStyles.itemDetailNameText}>{'Beef Burger'.toUpperCase()}</Text>
<Text style={menuStyles.itemDetailDescText}>Duotones are simply the combining of two colors
on an image, usually using very bright or contrasting colors. They require a bit of
design work but it is most definitely worth it.</Text>
</View>
<View style={menuStyles.itemDetailAddonsView}>
<View style={menuStyles.addonHeadingView}>
<Text style={menuStyles.addonHeadingText}>Addons</Text>
</View>
<FlatList
data={this.state.categories[0].items[0].addons}
keyExtractor={(item, index) => item.addonId.toString()}
renderItem={({item}) => this.renderAddonList(item)}
ItemSeparatorComponent={() => <Hr/>}
/>
</View>
</View>
</View>
</View>
)
}
}
如果有人能指出我正确的方向，我将不胜感激。 TIA
2 个答案:
答案 0 :(得分：0)
正如您所描述的，您希望将所有事物都放在一个屏幕上，为此，您可以做一件事，即制作多个平面屏幕并在this.state的平面屏幕中传递额外的数据，以便可以使用平面列表呈现功能中的状态变量，方法是放置条件以显示和隐藏特定的平面列表，并根据类别将数据传递到平面列表中。
答案 1 :(得分：0)
在互联网上苦苦挣扎并搜寻了几天之后，我找到了适合自己情况的最佳解决方案……因此，我与那些可能与我处于同一场景的人共享……该场景是加载商品在第一列中点击一个类别时，在第二列和第三列中的项目详细信息中...我尝试使用组件状态来处理此问题，但是它不适用于我的情况，因此我最终使用了Redux并添加了代码的一些逻辑使我能够获得所需的功能。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？