好的,非常新的在这里做出反应,我试图非常简单地导入另一个.js文件并让它在index.ios.js中的主render()
func中运行
我到处寻找并尝试了import and require
这样做,但是我遇到了错误:
这就是我所拥有的,只是添加了导入行就会引发错误:
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);
我的另一堂课:
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;
如何在index.ios.js中显示TestClass?有什么问题?
答案 0 :(得分:8)
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")
}
}
您错过了import语句中的{Component}。我也拿了你的module.exports语句,这是不必要的。
答案 1 :(得分:-1)
this.test()
不是<View>
中TestClass
的有效子项,因为它不是有效的React组件,也不会返回。{/ p>
如果您想“测试”您的TestClass.render()
功能正在运行,请将console.log()
置于return
语句之上,如下所示:
render() {
this.test();
return (
<View style={styles.container}></View>
);
}
当然,你实际上不会看到,因为TestClass
没有任何孩子。