Reactjs 如何在react native中使用flexbox创建此视图

这就是我想让plz关注产品的观点，这就是我所做的：

我制作了一个名为“AllProducts”的组件，将其

flexDirection

放到

row

中，并将我的产品数组绑定到它上面，但我得到了这个结果

如果有帮助，这是我的代码：

这是我的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>
        )
    }
}

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>    
        )

const-Product\u-kind\u-one=[{
名字：“漂亮的布”，
价格：'2999'，
image:require（“../imgs/1.jpg”）
},{
名称：“橙色布料”，
价格：'3999'，
image:require（“../imgs/2.jpg”）
},{
名称：“粉色布料”，
价格：'2999'，
image:require（“../imgs/3.jpg”）
},{
名称：“彩色布料”，
价格：'1999'，
image:require（“../imgs/4.jpg”）
},{
名称：“黑色高跟鞋”，
价格：'0999'，
图像：需要（“../imgs/5.jpeg”）
},{
名称：“蓝色漂亮的鞋子”，
价格：'3599'，
image:require（“../imgs/6.jpg”）
},{
姓名：'女蓝包'，
价格：'2299'，
image:require（“../imgs/7.png”）
}];
常数乘积\u种类\u二=[{
姓名：'女红包'，
价格：'2299'，
image:require（“../imgs/9.jpg”）
},{
名称：'领结鞋'，
价格：'1299'，
image:require（“../imgs/10.jpg”）
},{
名称：'深黑色袋子'，
价格：'1299'，
image:require（“../imgs/13.jpg”）
},{
名称：“奶油鞋”，
价格：'3499'，
image:require（“../imgs/12.jpg”）
},{
名称：“绿蓝鞋”，
价格：'5499'，
image:require（“../imgs/12.jpg”）
}];
导出默认类AllProducts扩展组件{
render（）{
返回(
)
}
}

这是我的产品。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>
        )
    }
}

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>    
        )

返回(
{this.props.Products.map（（产品，索引）=>{
console.log（Product.image）；
返回(
条纹Mxi连衣裙
1299卢比
)
})}
)

---

我哪里出错了？

我只有几分钟的时间，找到了一个解决方案，产生了以下结果：

代码是这样的：

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',
    }
});

从“React”导入React；
从“react native”导入{FlatList，Text，View，StyleSheet}；
导出默认类ListScreen扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
清单项目：[1,2,3]，
};
}
render（）{
const{listItems}=this.state；
返回(
);
}
renderListItemFirstChildSmaller=（{item，index}）=>{
返回{item}；
};
renderListItemLastChildSmaller=（{item，index}）=>{
返回{item}；
};
}
const styles=StyleSheet.create({
容器：{
宽度：“100%”，
高度：“100%”，
显示：“flex”，
flexDirection:'行'，
}，集装箱柱：{
显示：“flex”，
弹性：1，
flexDirection:'列'，
}，正文：{
边框样式：“实心”，
边框宽度：1，
边框颜色：“绿色”，
}
});

---

如果普通样式表支持first和last-child属性，显然会更好，但我认为这里的想法很清楚。还有扩展样式表，它还支持第一个/最后一个子级，如果您想让它更干净。

您的问题是希望列中的项目位于不同的高度吗？或者在右上角有一个洞？是的，我的问题是我希望列中的项目在不同的高度nx，非常感谢你的贡献tnx很多