【发布时间】:2020-05-31 05:56:30
【问题描述】:
所以我上周刚开始学习 React Native 以尝试学习开发应用程序。我一直在学习 Udemy 课程,在我尝试创建一个新组件之前,它一直进展顺利。我已经重读了 3 次课程,试图找出我的错误,但我似乎看不出代码之间的区别。请原谅我的业余错误,无论它在哪里。主 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;
【问题讨论】:
标签: android reactjs react-native components