Блог

Поэтому я столкнулся с проблемой, когда единственный дочерний элемент представления горизонтальной прокрутки не занимает всю его ширину. Я попытался вставить flex: 1 в ребенка, но это все равно не работает (так как я видел в инспекторе, что это flexDirection: строка). Я надеюсь, что вы, ребята, могли бы помочь мне или указать, где я ошибся.

Вот как это выглядит, я соответственно поместил цвет фона на ребенка (красный) и родителя, который является видом прокрутки (синий).

Код:

 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,
  },
});