版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_28268507/article/details/70045829
RN基础以及组件学习技巧
上一篇博客讲了RN环境的搭建,和RN项目的创建以及运行,如有什么问题,可以留言
这节讲下RN基础以及组件的学习
这是RN项目的结构图,index.android.js 和 index.ios.js分别对应了android ,ios 平台的软件程序入口。package.json 配置文件,类似于Android studio 中的build.gradle
打开index.android.js 开始基本模版分析:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
//导入组件,每使用一个官方组件或者开源组件的时候必须要import
//类似于java中导包
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
//导出一个默认的组件,注意一个js文件中只能有一个default的组件,但可
//以有多个组件
export default class one_demo extends Component {
//组件的渲染方法,返回一个布局,布局实现:组件+flexbox
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
//组件的样式,大小,颜色等
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,
},
});
//将one_demo组件注册到程序入口中
AppRegistry.registerComponent('one_demo', () => one_demo);