这是我想让大家关注产品的观点,这就是我所做的:
我制作了一个名为“AllProducts”的组件,并将其 flexDirection
放置到 row
并在其上绑定(bind)我的产品数组,但我得到了这个结果
这是我的代码(如果有帮助的话):
这是我的 AllProduct.js
const Product_kind_one = [{
name : 'Nice cloth',
price : '2,999',
image : require('../imgs/1.jpg')
},{
name : 'Orange cloth',
price : '3,999',
image : require('../imgs/2.jpg')
},{
name : 'Pink cloth',
price : '2,999',
image : require('../imgs/3.jpg')
},{
name : 'Colory cloth',
price : '1,999',
image : require('../imgs/4.jpg')
},{
name : 'Dark High Heels',
price : '0,999',
image : require('../imgs/5.jpeg')
},{
name : 'Blue Nice Shoes',
price : '3,599',
image : require('../imgs/6.jpg')
},{
name : 'Women Blue Bag',
price : '2,299',
image : require('../imgs/7.png')
}];
const Product_kind_two = [{
name : 'Women Red Bag',
price : '2,299',
image : require('../imgs/9.jpg')
},{
name : 'Bow tie Shoes',
price : '1,299',
image : require('../imgs/10.jpg')
},{
name : 'Dark Black Bag',
price : '1,299',
image : require('../imgs/13.jpg')
},{
name : 'Cream Shoes',
price : '3,499',
image : require('../imgs/12.jpg')
},{
name : 'Green and Blue Shoes',
price : '5,499',
image : require('../imgs/12.jpg')
}];
export default class AllProducts extends Component{
render(){
return(
<View style={{flexDirection : 'row',justifyContent : 'center'}}>
<View style={{flex : 1,justifyContent : 'center'}}>
<Products Products={Product_kind_one}/>
</View>
<View style={{flex : 1,justifyContent : 'center'}}>
<Products Products={Product_kind_two}/>
</View>
</View>
)
}
}
这是我的 Product.js
return(
<View style={{flexDirection : 'column'}}>
{this.props.Products.map((Product,index)=>{
console.log(Product.image);
return(
<View key={index} style={{backgroundColor : '#fff',borderRadius : 5,justifyContent : 'center',margin : 10}}>
<Image source={Product.image} style={{height : 200,width : null,resizeMode : 'cover'}} />
<TouchableOpacity style={{alignItems : 'flex-end',justifyContent : 'center',position : 'absolute',top : 10,right : 10 }}>
<LikeButton/>
</TouchableOpacity>
<View style={styles.priceContainer}>
<Text style={{fontSize : 12}}>Stripped Mxi Dress</Text>
<Text style={{color : 'rgb(219, 10, 91)'}}>Rs.1,299</Text>
</View>
</View>
)
})}
</View>
)
我哪里出错了???
最佳答案
我花了几分钟找到了一个解决方案,产生了这个:
它的代码是这样的:
import React from 'react';
import {FlatList, Text, View, StyleSheet} from "react-native";
export default class ListScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
listItems: [1,2,3],
};
}
render() {
const {listItems} = this.state;
return (
<View style={styles.container}>
<FlatList
style={styles.containerColumn}
data={listItems}
renderItem={this.renderListItemFirstChildSmaller}
/>
<FlatList
style={styles.containerColumn}
data={listItems}
renderItem={this.renderListItemLastChildSmaller}
/>
</View>
);
}
renderListItemFirstChildSmaller = ({item, index}) => {
return <Text style={[styles.text, { height: index === 0 ? 100 : 200}]}>{item}</Text>;
};
renderListItemLastChildSmaller = ({item, index}) => {
return <Text style={[styles.text, { height: index === this.state.listItems.length - 1 ? 100 : 200}]}>{item}</Text>;
};
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
}, containerColumn: {
display: 'flex',
flex: 1,
flexDirection: 'column',
}, text: {
borderStyle: 'solid',
borderWidth: 1,
borderColor: 'green',
}
});
如果普通的样式表支持第一个和最后一个子属性,那显然会更好,但我认为这里的想法很明确。如果您想让它更干净,还有扩展样式表,它还支持第一个/最后一个子元素。
关于reactjs - 如何在react-native中使用flexbox来制作这个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47700414/