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