在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,
},
});