React native：组件未定义？ 无法导入？

Question

Ok, very new to react native here and Im trying to very simply import another .js file and have that be run in the main render() func in index.ios.js

I have looked everywhere and tried both import and require to do this, however I am stuck with error:

Here is what I have, the error is thrown at just the addition of the import line:

import React, { Component } from 'react';
import { Button, Card } from 'react-native-material-design';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
//import { Container, Content } from 'native-base';

import TestClass from "./TestClass";
//var animation = require('./TestClass');

//BODY
export default class SkysReact extends Component {


  render() {
    return (<View style={styles.container}>
    <TestClass/>
    </View>);

    // return (<View style={styles.container}>
    // {this.test()}
    // </View>);
  }
  test() {
  console.log("Hello World")
}

animate()
{
  console.log("animate");
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#404040',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#333333'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

And my other class:

import React from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';

export default class TestClass extends Component { // not defined error here

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
}
module.exports = TestClass;

How can I just display TestClass in my index.ios.js? What is wrong?

Answer 1

Ah hah. I know exactly what it is. Compare the very top line of your TestClass file with mine below. You will see the difference. Fix this, and your done.

import React, {Component} from 'react';
import Animation from 'lottie-react-native';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  Easing,
  ScrollView,
  RefreshControl,
  AppRegistry
} from 'react-native';
export default class TestClass extends Component {

    render() {
      return (<View style={styles.container}>
      {this.test()}
      </View>);
    }
    test() {
    console.log("Hello World 2222")
  }
} 

You were missing the, {Component} in your import statement. I also took our your module.exports statement, its unnecessary.

Answer 2

this.test() is not a valid child of your <View> in TestClass because it is not a valid React Component, nor does it return one.

If you want to "test" that your TestClass.render() function is running, put the console.log() above your return statement, like this:

render() {
  this.test();
  return (
    <View style={styles.container}></View>
  );
}

Of course, you won't actually see anything because TestClass doesn't have any children.