在ReactNative的项目目录中,修改UI,主要修改的是下图标注出来的俩个文件
在index.js的文件中
import {
AppRegistry //注册组件
} from 'react-native';
import App from './App';//引用APP文件
// 注册应用(registerComponent)后才能正确渲染
// 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('Demo', () => App);
在其APP.js文件中
//引入了React框架和react中的Component组件,
import React, { Component } from 'react';
import {
Platform,//注册组件
StyleSheet,//通过这个可以为组件创建一些样式
Text,//注册以下要用的组件,如text、view、image...
View,
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
//创建了APP这个类继承自Component
export default class App extends Component<{}> {
//render:初始化方法,类似ViewDidLoad,返回具体的组件内容
render() {
//返回的组件内容
return (
//只能有一个View
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
//创建一个样式类,用以修饰各个组件
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'yellow',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});