1. Preface
Commodity classification is a common operation of a variety of apps, usually the left and right columns are the categories of goods, the column on the rights is the display of goods, while the left and the two columns can be sliding. Today we will use react native to achieve this effect.
Implementation content: 1) column display
2) The left and right two columns can be swipe up and down, after the network operation can pull down to refresh, load more and so on.
3) Category bar (left column), select to change the background color, commodity bar (right column), according to the selected category, display the corresponding product.
2. Properties
Dimensions:
Dimensions.get (' window '). Height; Gets the height of the current screen
Dimensions.get (' window '). Width; Gets the width of the current screen
Pixelratio:
1/pixelratio.get (); Gets the point of a pixel
justifycontent: Flex-start | flex-end | center | space-between | Space-around
- Flex-start: The Elastic box element aligns to the starting position of the line. The boundary of the primary start position of the first child element of the row is aligned with the boundary of the primary start position of the row, and all subsequent telescopic box items are aligned with the previous item.
- Flex-end: The Elastic box element aligns to the end of the line. The boundary of the primary end position of the first child element of the row is aligned with the boundary of the main end position of the row, and all subsequent telescopic box items are aligned with the previous item.
- Center: The Elastic box element aligns to the middle of the row. The child elements of the row are aligned to each other and centered in the row, while the first element is equal to the margin of the primary start position of the line with the margin of the last element and the primary end of the row (if the remaining space is negative, an overflow of equal lengths is maintained).
- Space-between: The elastic box elements are evenly distributed in the row. If the left-most remaining space is a negative number, or if the row has only one child element, the value is equivalent to ' Flex-start '. In other cases, the boundary of the first element is aligned with the boundary of the primary start position of the row, while the last element's boundary is aligned with the margin of the row's main end position, while the remaining telescopic box items are evenly distributed and ensure that the white space between 22 is equal.
- Space-around: The elastic box elements are evenly distributed across rows, leaving half of the space between child elements and child elements. This value is equivalent to ' center ' if the left-most remaining space is a negative number, or if the line has only one telescopic box item. In other cases, the telescopic box items are evenly distributed and ensure that the space between 22 is equal, while the space before the first element and the last element are half as many other white space.
Flex-start | Flex-end | Center | Baseline | Stretch
- Flex-start: The boundary of the starting position of the side axis (longitudinal axis) of the elastic box element is close to the start boundary of the side axis of the row.
- Flex-end: The boundary of the side axis (longitudinal axis) of the elastic box element is positioned close to the end boundary of the line's side axis.
- Center: The Elastic box element is centered on the side axis (vertical axis) of the row. (If the size of the row is smaller than the size of the elastic box element, it overflows the same length in two directions).
- Baseline: The value is equivalent to ' flex-start ' if the inline axis of the elastic box element is the same as the side axis. In other cases, the value will participate in the baseline alignment.
- Stretch: If the property value of the specified side axis size is ' auto ', its value causes the item's margin box to be as close to the size of the row as possible, but at the same time, the limit of the ' Min/max-width/height ' property is followed.
3. Usage examples
Comments:
1, This.state.leftCategoryData: Storage is the left Category column category name, with the right column product data index corresponding.
2, This.state.selectCategoryIndex: Record selected left left column, according to this value set the left category bar selected category background, check is white background, not selected is a gray background.
3, This.state.rightData: corresponding to the left category of goods, these values can be obtained from the server, format three data stored in an index, convenient for subsequent code use.
4, Categoryclick: Response to the left category bar click event.
5. Leftrenderrow: Renders the left category bar.
6, Rightrenderrowitem: According to the index to render the right product bar, three data as a row to render.
7. Rightrenderrow: Renders the right product bar.
8, Style: Left and right two columns, proportional to 2:7
9, sliding operation with ScrollView to achieve
4. Effects
"React Natvie" product category
