无法在组件中嵌套反应导航 - React Native

时间:2017-10-21 12:08:51

标签: javascript react-native react-navigation

我无法在组件中嵌套反应导航StackNavigator - 详见https://reactnavigation.org/docs/intro/nesting#Nesting-a-Navigator-in-a-Component

但是,即使遵循T指南,我也会收到以下错误 -

  

路线'主页'应该声明一个屏幕

这是我的“GoHome.js”组件,参考https://reactnavigation.org上的指南,是“NavigatorWrappingScreen”

/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
} from 'react-native';

import { Constants, Location, Permissions } from 'expo';
import MainNavigator from '../navigation/MainNavigator';
import AppInfo from '../components/AppInfo/AppInfo';
import { MainStyle } from '../stylesheets/MainStyle';


export default class GoHome extends Component {
  constructor(props){
    super(props);
  }

  static navigationOptions = {
    header: null,
  };

  componentWillMount(){
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      console.log('Error - location access denied');
    }else{
      let location = await Location.getCurrentPositionAsync({});
      console.log(location);
    }
  }

  render() {
    return (
      <Image style = {MainStyle.imageContainer} source = {require('../assets/bg/bg_main.jpg')}>
        <AppInfo />
        <MainNavigator navigation = {this.props.navigation} />
      </Image>
    );
  }
}

const styles = StyleSheet.create({
});

GoHome.router = MainNavigator.router;

这是我的MainNavigator.js组件,它是指南中的“MainScreenNavigator”组件。

/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import Register from '../components/Register/Register';
import Password from '../components/Password/Password';
import AppInfo from '../components/AppInfo/AppInfo';
import { MainStyle } from '../stylesheets/MainStyle';
import GoHome from '../screens/GoHome';

const NavigatorMain  = StackNavigator({
  Home: {
    screen: GoHome
  },
  Register: {
    screen: Register
  },
  Password: {
    screen: Password
  }
});

// export default class MainNavigator extends Component {
//   render() {
//     return (
//       <NavigatorMain />
//     );
//   }
// }

const styles = StyleSheet.create({
});

export default NavigatorMain;

任何帮助都将非常感谢。 TIA

0 个答案:

没有答案