javascript - 反应原生水平滚动视图的唯一孩子不覆盖全宽

Question

所以我面临一个问题，即水平滚动视图的唯一孩子没有占据它的全宽。我尝试将 flex: 1 放在孩子中，但它仍然不起作用（因为我在检查器中看到它是 flexDirection: row）。我希望你们能帮助我或指导我哪里出错了。

这是它的样子，我分别在子项（红色）和父项上放置了一个背景颜色，即滚动视图（蓝色）。

代码：

import React, {useEffect} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
import {Table, TableWrapper, Cols, Col, Rows, Row} from './table/index';
import {globalStyles} from '../../styles/global';

export default function TrooperViewSchedule(props) {
  // Create the time programatically
  const generateTime = () => {
    const timeArray = [];
    let hour = 0;
    while (hour <= 23) {
      hour < 10 ? timeArray.push(`0${hour}00`) : timeArray.push(`${hour}00`);
      hour++;
    }
    return timeArray;
  };

  const tableTime = [...generateTime()];
  const tableTrooper = [
    '',
    'Qili',
    'Diego',
    'Jarret',
    'Karthik',
    'Marty',
    'Alyssa',
    'Jeremy',
  ];
  const dimensions = {
    portrait: {
      height: 50,
      width: 50,
    },
    landscape: {}, // TODO
  };

  // Portrait View

  return (
    <View style={styles.container}>
      {/* The fixed top header */}
      <ScrollView horizontal={true} style={{backgroundColor: 'blue'}}>
        <View style={{backgroundColor: 'red', flex: 1}}>
          <Table borderStyle={styles.borderStyle} style={styles.table}>
            <Row data={tableTrooper} textStyle={styles.tableHeaderTextStyle} />
          </Table>
          {/* The fixed side column */}
          <ScrollView>
            <Table style={styles.table}>
              <Col data={tableTime} />
            </Table>
          </ScrollView>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    ...globalStyles.container,
    padding: 0,
  },
  borderStyle: {borderWidth: 0.2, borderColor: '#D1D3D8'},
  table: {
    width: 'auto',
  },
  tableHeaderTextStyle: {
    ...globalStyles.text,
    ...globalStyles.boldText,
    ...globalStyles.centerText,
  },
});

标签： javascriptreact-nativeflexboxscrollview