javascript - 固定 Header 水平 ListView react-native

Question

我使用 react-native 列表视图创建了一个表格视图。

我想修复此表中的标题和第一列。

这是我创建的：

此列表视图可水平和垂直滚动，并且所有数据都是动态的。

如果可能，我想冻结此表的标题和第一列

这是我的代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  ScrollView,
  Image,
  TouchableOpacity,
  Platform,
  View
} from 'react-native';

import PMR from "../utilities/PMR";
import Spinner from 'react-native-loading-spinner-overlay';

import NavigationBar from 'react-native-navbar';
let bg         = require('image!bg'),
    back       = require('image!back'),
    Dimensions = require('Dimensions'),
    windowSize = Dimensions.get('window'),
    Screen     = require('Dimensions').get('window');

class StationData extends Component {
  constructor(props) { 
    super(props)
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      isVisible: true,
    }
  }

  componentDidMount() {
    let {username, password} = this.props.navigator.cerdentials;
    let obj = {  
    'stXid':this.props.data.stationId,
    'startTime':this.props.data.from,
    'endTime':this.props.data.to
    };

    PMR.rawData(username, password, obj).then((rslt) =>  {

      var RawData = [];
      rslt.forEach(function(dataItem) {
        if (dataItem.pointValue.length > 0)    
          RawData.push(dataItem);
      });

      RawData.unshift({name: 'Time', pointValue: rslt[0].pointValue})
      // console.log(rslt)
      this.setState({
            dataSource: this.state.dataSource.cloneWithRows(RawData),
            isVisible: false,
      });
    });
  }

  renderData(rowData) {
    // console.log(rowData.pointValue);
    if(rowData.name === 'Time'){
        return (
          <View>

        <View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}>
          <View style={styles.names}> 
            <Text style={{marginHorizontal: 12, marginVertical:(Platform.OS === 'ios') ? 15 : 16}}>{rowData.name}</Text>
          </View>
            {rowData.pointValue.map((data) => <View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}><Text>{data.time.split(" ")[1]}</Text></View>)}
        </View>
        </View>
      );
    } else {
        return (
           <View>
           <View style={{borderColor:'rgba(214, 214, 214,1)',borderWidth:1}}>
          <View style={styles.names}> 
            <Text style={{marginHorizontal: 12, marginVertical: 6.5}}>{rowData.name}</Text>
            <Text>({rowData.engineeringUnit})</Text>
          </View>
            {rowData.pointValue.map((data) => <View style={{borderBottomWidth:1,borderColor:'rgba(214, 214, 214,1)',padding:8}}><Text>{isNaN(data.value) ? (data.value) : +(Math.round(data.value + "e+1")  + "e-1")}</Text></View>)}
        </View>
        </View>
      );
    }
  }

  render() {
    var titleConfig = {
    title: `Station Data: ${this.props.data.stationName}`,
  }
    return (
      <View style={styles.container}>

      <Image style={styles.bg} source={bg} />

      <Spinner visible={this.state.isVisible} />

    <NavigationBar
      title = {titleConfig}
      leftButton={<TouchableOpacity onPress={() => this.props.navigator.pop()}>
      <Image style={styles.back} source={back} />
      </TouchableOpacity>}
      style = {{backgroundColor:'rgba(244, 244, 244,1)'}} />

      <ScrollView>
      <View style={{position:'absolute', right:16, marginVertical:12}}>
      <Text>{this.props.data.showDate}</Text>
      </View>
      <ListView
      horizontal={true}
      automaticallyAdjustContentInsets={false}
      removeClippedSubviews={false}
      enableEmptySections={true}
      dataSource={this.state.dataSource}
      renderRow={this.renderData}
      style={styles.listView}
      />  
      </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bg: {
  position: 'absolute',
  left: 0,
  top: 0,
  width: windowSize.width,
  height: windowSize.height
},
names: {
  backgroundColor:'rgba(219, 243, 207,1)',
  borderBottomWidth:1,
  borderColor:'rgba(214, 214, 214,1)',
  alignItems:'center',
},
back:
  { marginTop:10,
    marginLeft:10,
    width:20,
    height:20,
  },
  listView: {
    marginVertical:(Screen.width/100)*10,
    marginHorizontal:(Screen.width/100)*5
  },
});

module.exports =StationData;