反应导航:使用自定义导航器时,“无法将没有YogaNode的孩子添加到没有测量功能的父母中”

时间:2018-09-05 04:45:39

标签: react-native react-navigation

我正在尝试为下图中的应用创建用户界面:

My App's UI

我按照React Navigation的指示根据UI来制作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>
    );
  }
}

我的环境:react-navigation:2.12.1,react-native:0.55.4 我发现问题是我通过遵循反应导航的文档放置了组件。它在iOS上运作良好,但在Android上无法运作。 您是否曾经遇到过这个问题。我期待着您的解决方案。最好的问候。

1 个答案:

答案 0 :(得分:2)

确保您没有在return方法中留下任何注释的代码,并且也没有没有react native的Text标签的任何文本(字符串)。