Question

我正在尝试在我的应用程序中实现React-Navigation。当我运行应用程序时，它崩溃并出现错误：

Element type is invalid: expected a string or class/function but got: object. You likely forgot to export your component from the file it's defined in.

我在这里搜索但是我试过的任何解决方案都没有用。这是我的代码：

指数：

import React, { Component } from 'react';
import { View } from 'react-native';
import { Root } from './config/router';

class Stylelist extends Component{
  render(){
    return(
      <View>
        <Root />
      </View>
    );
  }
}

export default Stylelist;

路由器：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import Login from '../views/Login';

export const Root = StackNavigator({
  Login:{
    screen: Login,
  },
  Register:{
    screen: Register,
    navigationOptions:{
      title: 'Registertion'
    }
  }
});

登录：

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

//TODO: Change StatusBar color.
export default class Login extends Component{

  constructor(props){
    super(props);
  }

  render(){
    const { navigate } = this.props.navigation;
    return(
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <StatusBar
          barStyle="light-content">
        </StatusBar>
        <View style={styles.logoContainer}>
          <Image
          style={styles.logoImg}
          />
        </View>

        <View style={styles.formContainer}>
          <TextInput
            placeholder="email"
            placeholderTextColor="#315D49"
            returnKeyType="next"
            onSubmitEditing={()=> this.passwordInput.focus()}
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            color="#315D49"
            style={styles.input} />
          <TextInput
            placeholder="password"
            placeholderTextColor="#315D49"
            secureTextEntry={true}
            returnKeyType="go"
            ref={(input)=> this.passwordInput = input}
            color="#315D49"
            style={styles.input} />
          <TouchableOpacity style={styles.buttonContainer}>
            <Text style={styles.buttonText}>
              LOGIN
            </Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.signupContainer} onPress={()=>navigate('Register')}>
            <Text style={styles.signupText}>
              Don't have an account yet?
            </Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

寄存器：

  import React, { Component } from 'react';
  import { View, StyleSheet } from 'react-native';
  export default class Register extends Component{
    render(){
      return(
         <View style={styles.container}>
            <Text>
              Register page.
            </Text>
         </View>
      );
    }
  }

 const styles = StyleSheet.create({
   container:{
       flex: 1,
     }
 });

index.ios.js：

import { AppRegistry } from 'react-native';
import Stylelist from './index';

AppRegistry.registerComponent('Stylelist', () => Stylelist);

问题似乎在索引中。但我尝试的任何东西都不起作用。有什么帮助吗？

Answer 1

根据我的基本理解，考虑到React Navigation网站上的示例，您的index对象应该是注册到index.ios.js的根组件。它不能嵌套在import { AppRegistry } from 'react-native'; import { Root as Stylelist } from './config/router'; AppRegistry.registerComponent('Stylelist', () => Stylelist);或其他组件中。因此，如果您更改删除了/文件，并将touch 22/04/2017文件更改为此文件，

它应该适合你。

期望的字符串/类/函数得到了对象

1 个答案: