Question

大家好，我想知道如何像我有一个arrayholder一样在平面列表中明智地显示数据类别

const dataSource = [{"image":require("./assets/image/safarishoes.png"),"Product":"TimberLand Heritage",     "price":"$430", "category":"shoes", "id":1},
{"image":require("./assets/image/Watches2.png"),   "Product":"Uniform 203 Series",      "price":"$199", "category":"watch", "id":2},

{"image":require("./assets/image/handbag.png"),    "Product":"Crazy horse Leather Bag", "price":"$41",  "category":"bag"  , "id":3},
{"image":require("./assets/image/glass.png"),      "Product":"Rayban Aviator",          "price":"$30",  "category":"glass", "id":4},
{"image":require("./assets/image/Watches6.png"),   "Product":"NOMOS GLASHUTT",          "price":"$410", "category":"watch", "id":5},
{"image":require("./assets/image/Shoes.png"),      "Product":"Uniform 103 Series",      "price":"$100", "category":"shoes", "id":6},

];


const _renderItem = ({ item }) => (
    <MyListItem
        id={item.id}
        Product={item.Product}
        image={item.image}
        price={item.price}
        category={item.category}
    />
);

const _keyExtractor = (item, index) => item.id;

这是我的看法

class MyListItem extends React.PureComponent {

    render() {
        return (
          <View style={{padding:5,borderRadius:8}}>
            <TouchableOpacity >
          <View style={{backgroundColor:'white',borderRadius:8,borderColor:'#babcbe',borderWidth:1,borderColor:'transparent',alignItems:'center',flexDirection:'column'}}>
            <View style={{borderTopRightRadius:1,borderTopLeftRadius:1}}>
              <Image style={{height:250,width:185,borderTopRightRadius:7,borderTopLeftRadius:7}} source={this.props.image}></Image>
            </View>
              <View style={{alignItems:'center'}}>
              <Text style={{fontSize:18,fontFamily:'CRC55'}}  >{this.props.Product}</Text>
              <Text style={{fontSize:22,fontFamily:'CRC55'}}>{this.props.price}</Text>
              </View>
           </View>
         </TouchableOpacity>
         </View>
        );
    }
}

和我用来显示平面列表数据的主要类

class WishList extends Component {
  constructor(props){
    super(props);
  }


    render() {
      return (
        <View style={{backgroundColor:'#e4e9ee',padding:10,alignItems:'center'}}>
          <FlatList
            contentContainerStyle = {{flexDirection: 'row',alignItems:'center',paddingLeft:2,flexWrap: 'wrap'}}
              data={dataSource}
              keyExtractor={_keyExtractor}
              renderItem={_renderItem}   
          />
       </View>
      );
    }
  }

第二班

class Shoes extends Component {
    render() {
      return (
          <View>
            <Text> </Text>
          </View>
      );
    }
  }

我想只在第二个屏幕上显示鞋子，或者像我只需要显示 watchs。明智地显示数据类别，以便我可以轻松地对它们进行分类使用单个数据源。我需要的是我需要在不同屏幕上重用数据寻求帮助...

使用单个数据源在不同屏幕上的平面列表中明智地显示项目类别

0 个答案: