Question

React-native抛出这个奇怪的异常，即使代码似乎是准确的。我正在使用react-native 0.48。

包含index.js和login.js源代码

Login.js

import React, { Component } from "react";
import {
  AppRegistry,
  Text,
  View,
  TouchableOpacity,
  Label,
  TextInput
} from "react-native";
import { StackNavigator } from "react-navigation";
class LoginPage extends Component {
  constructor(props) {
    super(props);
  }

  render(){
   // const { navigate } = this.props.navigation;
    return(
      <View>
        <Label Text="Login" />
        <TextInput placeholder="UserName" />
        <TextInput placeholder="Password" />
        <TouchableOpacity Text="Login" />
      </View>
    );
  }
}

export default LoginPage;

Index.js

//Root Component

import React, { Component } from "react";
import { AppRegistry, View, Text } from "react-native";
import Root from "./config/router.js";
import LoginPage from './components/user/Login';
 class App extends React.Component {
  render() {
    return (

      <View>
        <LoginPage />
        <Text>this is index component </Text>
      </View>
    );
  }
}

export default App;

即使我看到与此问题相关的stackoverflow问题 StackOverflow .. Stilll我无法弄清楚这个问题。

router.js

//Screen router
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import LoginPage from "../components/user/Login";
import Register from "../components/user/Register";
//import App from "../index";

export const Root = StackNavigator({
  login: { screen: LoginPage },
  Register:{screen:Register}
});

Answer 1

如果您正在导入或使用它，则不能将第一个字母用作组件的小后者。第一个组件的后期必须是大写的，否则您将收到此错误

    <label Text="Login" /> //invalid
<Label Text="Login" />  //Valid

Android模拟器错误 - 预期组件类得到[对象，对象]

1 个答案: