如何在 react-native 中使用 flexbox 制作此视图

Question

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

我制作了一个名为“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>
        )
    }
}

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

我哪里做错了？？？

Answer 1

我只有几分钟的时间并找到了一个解决方案，它产生了这个：

它的代码是这样的：

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

如果正常的样式表支持第一个和最后一个子属性显然会更好，但我认为这里的想法很清楚。有扩展的样式表，它也支持第一个/最后一个孩子，如果你想让它更干净。