所以我上周刚开始学习React Native,尝试并学习开发应用程序。我一直在从Udemy课程中学习,在我尝试创建一个新组件之前,它一直进行得很好。我已经复习了三节课,试图发现我的错误,但是我似乎看不出代码之间的区别。不管我在哪里,请原谅我的业余错误。 app.js主文件包含以下内容:
import React from 'react';
import { StyleSheet, Text, View, Platform, Image, ImageBackground } from 'react-native';
import {Button} from 'native-base';
import Landing from './src/Landing'
import { render } from 'react-dom';
var myBackground = require('./assets/icons/landing.jpg');
export default class App extends React.Component() {
render() {
return (
<View style={styles.container}>
<Landing />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Platform.OS === "android" ? 50 : 0
},
});
我的组件代码是这样:
import React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {Button} from 'native-base';
var myBackground = require('../assets/icons/landing.jpg');
class Landing extends React.Component {
render() {
return(
<View>
<ImageBackground style={ styles.imgBackground } source={myBackground}>
<View style={styles.viewStyle}>
<Text style={styles.titleStyle}>Welcome to PokeSearch</Text>
<Button block={true} style={styles.buttonStyle} onPress={()=>{}}>
<Text style={styles.buttonText}>Start Searching for Pokemon!</Text>
</Button>
</View>
</ImageBackground>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Platform.OS === "android" ? 50 : 0
},
imgBackground: {
width: '100%',
height: '100%',
flex: 1
},
viewStyle: {
flex: 1,
flexDirection: 'column',
justifyContent: "center",
alignItems: "center"
},
titleStyle: {
fontSize: 30,
color: 'red',
alignItems: 'center',
},
buttonStyle: {
margin: 10
},
buttonText: {
color: 'red'
},
});
export default Landing;
将export default class App extends React.Component()
更改为export default class App extends React.Component
,在类组件中不需要括号。