忙碌了很久,业务工作终于可以稍稍轻松一点了,赶紧继续学习React-Native。初识RN,先来看看RN的最简单的页面结构吧。
打开index.ios.js页面:
第一句:
import React, { Component } from 'react';
这是RN 0.26后导入React的方式,这意思是,导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件。
接下来第二部分:
import {
AppRegistry,//内置模块,“注册操作”
StyleSheet, //个人理解:当前组件中用到的组件
Text, //个人理解:当前组件中用到的组件
View //个人理解:当前组件中用到的组件
} from 'react-native';
再往下面看,第三部分
//定义了一个名为TestRN的新的组件
export default class TestRN extends Component {
//render() 这是一个必须的方法,返回一些用户渲染结构的JSX语句
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
RN学习第二天
</Text>
<Text style={styles.instructions}>
终于解决新建的时候运行报错的问题啦!
</Text>
</View>
);
}
}
继续,自定义样式
//样式选择器,类似html中的标签选择器,自定义一些样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
最后一句,
//AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器
//一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次
AppRegistry.registerComponent('TestRN', () => TestRN);
最后显示效果: