Реагируйте с навигацией: «Невозможно добавить дочерний элемент, у которого нет YogaNode, к родительскому элементу без функции меры» при использовании пользовательских навигаторов

Question

Я пытаюсь сделать интерфейс для своего приложения на картинке ниже:

Пользовательский интерфейс моего приложения

Я следую инструкции React Navigation, чтобы сделать Custom Navigator в соответствии с пользовательским интерфейсом, но он не работает в Android. Появится красный экран с сообщением «Невозможно добавить ребенка, у которого нет YogaNode, к родителю без функции измерения». Вот мой код:

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import TabAboutScreen from './TabAbout';
import TabMyLessonScreen from './TabMyLesson';
import TabTeacherScreen from './TabTeacher';
import { ScrollView, View, Text } from '../../../components';
import TabNavigator from './TabNavigator';
import TopBar from './TopBar';
import styles from './styles';
import CourseHeader from './CourseHeader';
import theme from '../../../theme';
import i18n from '../../../i18n';

export const CourseDetailStackNavigator = createStackNavigator({
  TabAbout: TabAboutScreen,
  TabMyLesson: TabMyLessonScreen,
  TabTeacher: TabTeacherScreen,
}, {
  headerMode: 'none',
  initialRouteName: 'TabAbout',
});

export default class TabCourseDetail extends Component {
  static router = CourseDetailStackNavigator.router;

  constructor(props) {
    super(props);
    this._handleOnBackButtonPress = this._handleOnBackButtonPress.bind(this);
  }

  _handleOnBackButtonPress() {
    // do something
  }

  render() {
    return (
      <View style={styles.container}>
        <TopBar textButton={i18n.t('CMBack')} title={i18n.t('CDCourseDetail')} onPress={this._handleOnBackButtonPress} />
        <ScrollView
          style={styles.scrollContainer}
          stickyHeaderIndices={[1]}
          showsVerticalScrollIndicator={false}
          alwaysBounceVertical={false}
        >
          <CourseHeader />
          <TabNavigator />
          <View style={styles.test}>
            <CourseDetailStackNavigator navigation={this.props.navigation} />
          </View>
        </ScrollView>
      </View>
    );
  }
}

Моя среда: реагировать-навигация: 2.12.1, реагировать-нативно: 0.55.4 Я обнаружил, что проблема заключалась в том, что я поместил внутрь компонента, следуя документу реагировать навигации. Это хорошо работает в iOS, но не работает в Android. Вы когда-нибудь сталкивались с этой проблемой. Я с нетерпением жду ваших решений. С наилучшими пожеланиями.

Answer 1

Убедитесь, что вы не оставили ни одного комментария кода в методе возврата, а также не оставили текст (строку) без текстового тега кода native.