Родная базовая страница внутри вкладки

Question

Я использую вкладки из native-base с RN и хочу визуализировать другую страницу внутри этой вкладки. Если я скопирую весь код страницы «PrecoScreen», которая представляет собой сложную страницу, внутри моей страницы VendaScreen, код будет нормально отображаться внутри моей вкладки, но когда я использую «PrecosScreen» внутри тега Tab, страница не будет отображаться, и у меня будет Предупреждение на изображении.

Предварительный экран:

import React from 'react';
import Const from '../../utils/Constants';
import Alertmsg from '../../utils/AlertMsg';
import {
  StatusBar,
  SafeAreaView,
  View,
  // FlatList,
  ActivityIndicator,
  TouchableOpacity,
  TouchableHighlight,
  Dimensions,
} from 'react-native';
import ExtraDimensions from 'react-native-extra-dimensions-android';
import {
  Header,
  Item,
  Input,
  Icon,
  Button,
  Text,
  Tab,
  Tabs,
  TabHeading,
} from 'native-base';
import Realm from 'realm';
import _ from 'lodash';
import allSchemas from '../../service/Options';
import {ModalTabelaPreco} from './cpn/ModalTabelaPreco';
import {RecyclerListView, DataProvider, LayoutProvider} from 'recyclerlistview';
import Swipeable from 'react-native-swipeable';
import styles from './styles';

const ViewTypes = {
  FULL: 0,
  HALF_LEFT: 1,
  HALF_RIGHT: 2,
};

// let containerCount = 0;
let dtProvider = new DataProvider(
  (r1, r2) => {
    return r1.nrTabelaPrecoItem !== r2.nrTabelaPrecoItem;
  },
);

let {width} = Dimensions.get('window');

class PrecosScreen extends React.Component {
  constructor(props) {
    super(props);
    this._layoutProvider = new LayoutProvider(
      index => {
        if (index % 3 === 0) {
          return ViewTypes.FULL;
        } else if (index % 3 === 1) {
          return ViewTypes.HALF_LEFT;
        } else {
          return ViewTypes.HALF_RIGHT;
        }
      },
      (type, dim) => {
        switch (type) {
          case ViewTypes.HALF_LEFT:
            dim.width = width / 1.15 - 0.001;
            dim.height = 100;
            break;
          case ViewTypes.HALF_RIGHT:
            dim.width = width - (width / 1.15 - 0.001) - 0.001;
            dim.height = 100;
            break;
          case ViewTypes.FULL:
            dim.width = width;
            dim.height = 1.1;
            break;
          default:
            dim.width = width;
            dim.height = 0;
        }
      },
    );

    this._rowRenderer = this._rowRenderer.bind(this);

    this.state = {
      loading: true,
      data: [],
      isModalVisible: false,
      itemProduto: {},
      termo: '',
    };

    this.filteredItens = [];
    this.openTabelaPreco = this.openTabelaPreco.bind(this);
  }

  async componentDidMount() {
    this.focusListener = this.props.navigation.addListener('didFocus', () => {
      this.onFocusFunction();
    });
  }

  onFocusFunction = () => {
    this.loadTabelaPreco();
  };

  componentWillUnmount() {
    this.focusListener.remove();
  }

  leftContent = () => <Text>Button 1</Text>;

  rightButtons = () => <Text>Button 1</Text>;

  _rowRenderer(type, data) {
    switch (type) {
      case ViewTypes.HALF_LEFT:
        return (
          <Swipeable
            leftActionActivationDistance={50}
            style={styles.tabs}
            leftContent={
              <View style={styles.leftSwipeItem}>
                <Button style={styles.leftButton}>
                  <Icon name="list" />
                </Button>
              </View>
            }>
            <TouchableOpacity
              onPress={() => this.openTabelaPreco(data)}
              key={data.nrTabelaPrecoItem}
              style={styles.rowFront}>
              <View>
                <Text numberOfLines={1} style={styles.textItemCliente}>
                  {data.nrTabelaPrecoItem}-{data.dsProduto}
                </Text>
                <Text numberOfLines={1} style={styles.textItem}>
                  Marca: {data.dsMarca}
                </Text>
                <Text numberOfLines={1} style={styles.textItem}>
                  Estoque: {data.qtEstoqueAtual}
                </Text>
                <Text numberOfLines={1} style={styles.textItem}>
                  Múltiplo: {data.qtMultiplo} Qt. Embalagem:{' '}
                  {data.qtProdutoEmbalagem}
                </Text>
                <Text numberOfLines={1} style={styles.textItemCliente}>
                  Vl. Unit.: {data.vlBrutoProduto}
                </Text>
              </View>
            </TouchableOpacity>
          </Swipeable>
        );
      case ViewTypes.HALF_RIGHT:
        return (
          <View style={styles.containerGridRight}>
            <Button style={styles.imageButton}>
              <Icon style={{color: '#000'}} name="camera" />
            </Button>
          </View>
        );
      case ViewTypes.FULL:
        return (
          <View
            style={{
              height: 1,
              width: '100%',
              backgroundColor: '#CED0CE',
            }}
          />
        );
      default:
        return null;
    }
  }

  loadTabelaPreco = () => {
    try {
      this.showLoading();

      const databaseOptions = {allSchemas};

      Realm.open(databaseOptions).then(realm => {
        this.filteredItens = realm
          .objects('Produto')
          .filtered('cdTabelaPreco == 4');
        this.setState({data: this.filteredItens});
      });

      this.hideLoading();
    } catch (error) {
      Alertmsg.danger(Const.SYNC_DATA_ERROR);
      console.log('error', JSON.stringify(error, null, 4));
      this.hideLoading();
    }
  };

  handleChange = termo => {
    this.setState({termo});
    this.searchFilterDebounce(termo);
  };

  searchFilterDebounce = _.debounce(termo => this.searchFilter(termo), 1000);

  searchFilter = termo => {
    console.log('****** termo ******', termo);

    if (termo.trim().length > 0) {
      const databaseOptions = {allSchemas};

      Realm.open(databaseOptions).then(realm => {
        const data = realm
          .objects('Produto')
          .filtered(`dsProduto CONTAINS[c] "${termo}" `);
        this.setState({data});

        console.log('itens.length =', this.state.data.length);
        console.log('pesquisando termo', termo, '...');
      });
    } else {
      this.setState({data: this.filteredItens});
    }
  };

  onRowDidOpen = rowKey => {
    console.log('This row opened', rowKey);
  };

  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

  openTabelaPreco = itemProduto => {
    this.setState({itemProduto});
    this.toggleModal();
  };

  showLoading = () => this.setState({loading: true});
  hideLoading = () => this.setState({loading: false});

  render() {
    const {loading, data, itemProduto, isModalVisible} = this.state;

    const data2 = {
      data2list: dtProvider.cloneWithRows(data),
    };

    const deviceWidth = Dimensions.get('window').width;
    const deviceHeight =
      Platform.OS === 'ios'
        ? Dimensions.get('window').height
        : ExtraDimensions.getRealWindowHeight();

    return (
      <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
        <StatusBar backgroundColor="#3669CF" barStyle="light-content" />
        <Header
          androidStatusBarColor={'#3669CF'}
          style={{backgroundColor: '#4586EC'}}
          searchBar
          rounded>
          <Item>
            <Icon name="ios-search" />
            <Input
              placeholder="Pesquise o produto"
              onChangeText={this.handleChange}
              autoCorrect={false}
              value={this.state.value}
            />
          </Item>
          <Button>
            <Text>Pesquisar</Text>
          </Button>
        </Header>
        {loading ? (
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <ActivityIndicator />
          </View>
        ) : (
          <RecyclerListView
            layoutProvider={this._layoutProvider}
            dataProvider={data2.data2list}
            rowRenderer={this._rowRenderer}
          />
        )}

        <ModalTabelaPreco
          onPressModal={this.toggleModal}
          {...{deviceHeight, deviceWidth, isModalVisible, itemProduto}}
        />
      </SafeAreaView>
    );
  }
}

export default PrecosScreen;

VendaScreen:

import React from 'react';
import {
  StatusBar,
  SafeAreaView,
  View,
  Dimensions,
} from 'react-native';
import {  Icon,
  Text,
  Tab,
  Tabs,
  TabHeading,
  Container,
} from 'native-base';
import PrecosScreen from '../precos/Index';
import styles from './styles';

class VendasScreen extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Container>
        <Tabs
          tabBarPosition="bottom"
          style={styles.tabs}
          locked={true}
          scrollWithoutAnimation={true}
          initialPage={0}>
          <Tab
            heading={
              <TabHeading>
                <Icon name="book" />
                <Text>Capa</Text>
              </TabHeading>
            }
          />
          <Tab
            heading={
              <TabHeading>
                <Icon name="cart" />
                <Text>Vendidos</Text>
              </TabHeading>
            }
          />
          <Tab
            heading={
              <TabHeading>
                <Icon name="basket" />
                <Text>Itens</Text>
              </TabHeading>
            }>
            <PrecosScreen />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

export default VendasScreen;