RN基础以及组件学习技巧

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);

熟悉RN模版，您需要掌握基础的js，jsx，es6语法，flexbox弹性盒子布局以及RN 组件的生命周期，组件的props属性和state状态的作用

具体的可以到 RN中文网学习，图中圈中的部分都需要学习和掌握

学习技巧，多看文档，多百度，多动手练习，多思考，毕竟现在RN的资料也很多了，学会了基础，就可以开始下一篇的项目实战了。

OVER