收银台标题不受滑动影响;

添加物品后滑动到最底部;

src/pages/VerticalPage.js

 import React, {Component} from 'react';
-import {View, Text, Image, FlatList, Modal, Button} from 'react-native';
+import {View, Text, Image, Modal, Button, ScrollView} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
 import Swiper from 'react-native-swiper';
 import QRCode from 'react-native-qrcode-svg';
@@ -549,14 +549,182 @@ class VerticalPage extends Component {
         <View style={styles.container}>
           <View style={{flexDirection: 'row', flex: 1}}>
             <View style={{width: '100%'}}>
-              <FlatList
-                style={styles.goodsStyle}
-                ListHeaderComponent={this.renderHeader}
-                keyExtractor={this.keyExtractor}
-                horizontal={false}
-                data={goodsArr}
-                renderItem={({item, index}) => this.renderCell(item, index)}
-              />
+              <View style={{backgroundColor: '#fff'}}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  <View style={styles.firstThStyle}>
+                    <Text style={styles.ThText}>商品名称</Text>
+                  </View>
+                  <View style={styles.ThStyle}>
+                    <Text style={styles.ThText}>单价</Text>
+                  </View>
+                  <View style={styles.ThStyle}>
+                    <Text style={styles.ThText}>数量</Text>
+                  </View>
+                  <View style={styles.ThStyleMoney}>
+                    <Text style={styles.ThText}>金额</Text>
+                  </View>
+                  <View />
+                </View>
+              </View>
+              <ScrollView
+                onContentSizeChange={() =>
+                  this.ref.scrollToEnd({animated: false})
+                }
+                ref={ref => (this.ref = ref)}>
+                {goodsArr.map((item, index) => {
+                  return (
+                    <View
+                      style={
+                        index % 2 === 0 ? styles.evenCell : styles.oddCell
+                      }>
+                      <View style={styles.firstTdStyle}>
+                        <Text style={styles.TdText} numberOfLines={1}>
+                          {item.spec ? `${item.name}(${item.spec})` : item.name}
+                        </Text>
+                      </View>
+                      <View style={styles.TdStyle}>
+                        {item.price ? (
+                          // <Text style={styles.TdText}>
+                          //   {' '}
+                          //   ￥{NP.round(item.price, 2).toFixed(2)}/{item.unit}{' '}
+                          // </Text>
+                          <View
+                            style={{
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                              flexDirection: 'row',
+                            }}>
+                            <Text
+                              style={{
+                                fontSize: 20,
+                                textDecorationLine: 'line-through',
+                                color: '#999999',
+                                marginRight: 5,
+                              }}>
+                              ￥{NP.round(item.prePrice, 2).toFixed(2)}
+                            </Text>
+                            {item.unit ? (
+                              <Text
+                                style={{
+                                  fontSize: 25,
+                                  color: colors.textXSActive,
+                                }}>
+                                ￥{NP.round(item.price, 2).toFixed(2)}/
+                                <Text style={styles.TdText}>{item.unit}</Text>
+                              </Text>
+                            ) : (
+                              <Text
+                                style={{
+                                  fontSize: 25,
+                                  color: colors.textXSActive,
+                                }}>
+                                ￥{NP.round(item.price, 2).toFixed(2)}
+                              </Text>
+                            )}
+                          </View>
+                        ) : (
+                          <View
+                            style={{
+                              justifyContent: 'center',
+                              alignItems: 'center',
+                              flexDirection: 'row',
+                            }}>
+                            {item.unit ? (
+                              <Text style={styles.TdText}>
+                                ￥{NP.round(item.prePrice, 2).toFixed(2)}/
+                                {item.unit}
+                              </Text>
+                            ) : (
+                              <Text style={styles.TdText}>
+                                ￥{NP.round(item.prePrice, 2).toFixed(2)}
+                              </Text>
+                            )}
+                          </View>
+                        )}
+                      </View>
+                      <View style={styles.TdStyle}>
+                        {item.numChange ? (
+                          <Icon
+                            onPress={() =>
+                              this.props.numRemove(
+                                item.num,
+                                index + (this.props.current - 1) * pageSize,
+                              )
+                            }
+                            name="ios-remove-circle"
+                            color={item.num === 1 ? '#909090' : '#00c670'}
+                            size={35}
+                          />
+                        ) : (
+                          <View />
+                        )}
+                        <Touch
+                          viewWrap={false}
+                          onPress={() =>
+                            item.numChange &&
+                            this.props.numChange(
+                              index + (this.props.current - 1) * pageSize,
+                            )
+                          }>
+                          <Text style={styles.TdText}> {item.num} </Text>
+                        </Touch>
+                        {item.numChange ? (
+                          <Icon
+                            name="ios-add-circle"
+                            color="#00c670"
+                            size={35}
+                            onPress={() =>
+                              this.props.numAdd(
+                                item.num,
+                                index + (this.props.current - 1) * pageSize,
+                              )
+                            }
+                          />
+                        ) : (
+                          <View />
+                        )}
+                      </View>
+                      <View style={styles.TdStyleMoney}>
+                        {item.price ? (
+                          <Text style={styles.TdText}>
+                            {NP.round(item.price * item.num, 2).toFixed(2)}
+                          </Text>
+                        ) : (
+                          <Text style={styles.TdText}>
+                            {NP.round(item.prePrice * item.num, 2).toFixed(2)}
+                          </Text>
+                        )}
+                        <View style={styles.iconStyle}>
+                          <Icon
+                            style={{marginLeft: 0}}
+                            name="ios-close-circle"
+                            size={35}
+                            color={colors.bg}
+                            onPress={() =>
+                              this.props.removeIndex(
+                                index + (this.props.current - 1) * pageSize,
+                              )
+                            }
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  );
+                })}
+              </ScrollView>
+              {/*<FlatList*/}
+              {/*  style={styles.goodsStyle}*/}
+              {/*  ListHeaderComponent={this.renderHeader}*/}
+              {/*  keyExtractor={this.keyExtractor}*/}
+              {/*  horizontal={false}*/}
+              {/*  data={goodsArr}*/}
+              {/*  renderItem={({item, index}) => this.renderCell(item, index)}*/}
+              {/*/>*/}
             </View>
           </View>
           <View
@@ -898,7 +1066,7 @@ const styles = {
   },
   goodsStyle: {
     width: '100%',
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff',
   },
   pagination: {
     flex: 1,